Button

Basis-Klasse .button + Modifier: Style (.is-primary / .is-secondary / .is-tertiary / .is-link), Größe (.is-small), Icon-Position (.has-icon-start / .has-icon-end / .is-icon-only) und .is-alternate für dunkle Flächen. Jede Demo enthält einen Schalter, mit dem sich die Alternate- Variante live vergleichen lässt.

Primary

Gefüllter Button — Standard-CTA.

<div style="display:grid;grid-template-columns:repeat(4,auto);gap:.75rem 1rem;align-items:center;justify-items:start">
<button class="button is-primary">Regulär</button>
<button class="button is-primary has-icon-start"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Regulär</button>
<button class="button is-primary has-icon-end">Regulär<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-primary is-icon-only" aria-label="Regulär"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-primary is-small">Small</button>
<button class="button is-primary is-small has-icon-start"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Small</button>
<button class="button is-primary is-small has-icon-end">Small<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-primary is-small is-icon-only" aria-label="Small"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
</div>

Secondary

Outline-Style mit halbtransparenter Füllung. Für sekundäre Aktionen neben einem Primary-Button.

<div style="display:grid;grid-template-columns:repeat(4,auto);gap:.75rem 1rem;align-items:center;justify-items:start">
<button class="button is-secondary">Regulär</button>
<button class="button is-secondary has-icon-start"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Regulär</button>
<button class="button is-secondary has-icon-end">Regulär<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-secondary is-icon-only" aria-label="Regulär"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-secondary is-small">Small</button>
<button class="button is-secondary is-small has-icon-start"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Small</button>
<button class="button is-secondary is-small has-icon-end">Small<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-secondary is-small is-icon-only" aria-label="Small"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
</div>

Tertiary

Text-Button mit Bold-Gewicht — chromfrei, gut lesbar.

<div style="display:grid;grid-template-columns:repeat(4,auto);gap:.75rem 1rem;align-items:center;justify-items:start">
<button class="button is-tertiary">Regulär</button>
<button class="button is-tertiary has-icon-start"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Regulär</button>
<button class="button is-tertiary has-icon-end">Regulär<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-tertiary is-icon-only" aria-label="Regulär"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-tertiary is-small">Small</button>
<button class="button is-tertiary is-small has-icon-start"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Small</button>
<button class="button is-tertiary is-small has-icon-end">Small<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-tertiary is-small is-icon-only" aria-label="Small"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
</div>

Link

Textlink im Button-Layout. Figma definiert für Link keine kompakte Variante.

<div style="display:grid;grid-template-columns:repeat(4,auto);gap:.75rem 1rem;align-items:center;justify-items:start">
<button class="button is-link">Regulär</button>
<button class="button is-link has-icon-start"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>Regulär</button>
<button class="button is-link has-icon-end">Regulär<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
<button class="button is-link is-icon-only" aria-label="Regulär"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
</div>

Alternate anwenden

.is-alternate funktioniert an zwei Stellen: direkt am Button oder an einem umgebenden Container. Am Container wirkt die Regel als Kontext — sämtliche .button darin flippen in einem Rutsch. Praktisch für dunkle Hero-Sections, Footer oder Overlays, in denen alle Buttons invertiert sein sollen.

<!-- Einzelner Button -->
<button class="button is-primary is-alternate">Einzeln</button>

<!-- Ganze Sektion — kein Modifier an den Buttons nötig -->
<section class="is-alternate" style="background:#2d2d36;padding:1.5rem;border-radius:.5rem;display:flex;gap:.75rem;flex-wrap:wrap">
  <button class="button is-primary">Primary</button>
  <button class="button is-secondary">Secondary</button>
  <button class="button is-tertiary">Tertiary</button>
  <button class="button is-link">Link</button>
</section>

Beide Selektoren (.button.is-alternate und .is-alternate .button) haben Spezifität 0,2,0 — konventionskonform, kein !important.

Zustände

:hover, :active und der Fokus-Ring kommen automatisch. Zusätzlich steuerbar:

<div style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap">
<button class="button is-primary" disabled>Disabled</button>
<button class="button is-primary is-loading">Loading</button>
</div>

Der Loading-Zustand blendet den Text aus und zeigt einen Spinner — die Breite bleibt stabil.

Anpassen

Jeder Button exponiert Component-Variablen (--button-bg, --button-fg, --button-border-color, --button-pad-block, --button-pad-inline, --button-font-size, --button-radius, --button-gap):

<button class="button is-primary" style="--button-bg: rebeccapurple; --button-border-color: rebeccapurple">Custom</button>