Intents

.primary, .secondary, .success, .warning, .danger do not style elements directly. They only expose --intent and --intent-fg. Components and variants decide how to consume them.

Success

<button class="btn primary">Primary</button>
<span class="badge success">Success</span>

There is no .btn-primary or .badge-success. Intents are generic and reusable across any component that supports them. Components fall back to their own default intent when no intent class is set. Buttons, badges, and alerts use the neutral palette (--neutral / --neutral-fg) by default. Custom intents need no framework support — define --intent and --intent-fg on a class:

CSS

.tertiary {
  --intent: var(--tertiary);
  --intent-fg: var(--tertiary-fg);
}

Tertiary

<button class="btn tertiary">Tertiary</button>
<span class="badge tertiary">Tertiary</span>