Button

Interaktives Element für Aktionen und Links. Unterstützt 5 visuelle Varianten, 3 Größen, einen Loading-Zustand und optionale Icons. Rendert automatisch als <button> oder <a>, je nachdem ob eine URL angegeben ist.

Varianten

Jede Variante hat einen klaren Einsatzzweck. Primary für die wichtigste Aktion auf der Seite, Secondary für ergänzende Aktionen, Outline für weniger prominente Alternativen, Ghost für Inline-Links mit Button-Verhalten, Destructive für Löschen und Abbrechen.

Alle Varianten

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>

Größen

Small für kompakte Bereiche wie Tabellen oder Tags. Medium ist der Standard. Large für prominente Call-to-Actions in Hero-Sektionen.

3 Größen

<Button size="sm">Klein</Button>
<Button size="md">Standard</Button>
<Button size="lg">Gross</Button>

Als Link

Sobald ein href gesetzt wird, rendert der Button als <a>-Tag. Das Aussehen bleibt identisch, aber semantisch ist es ein Link — wichtig für Barrierefreiheit.

Button als Link

Förderung ansehen Kontakt aufnehmen

<Button href="/foerderung">Förderung ansehen</Button>
<Button href="/kontakt" variant="outline">Kontakt</Button>

Zustände

Disabled & Loading

Deaktivierte Buttons sind nicht klickbar und visuell abgeblendet. Loading zeigt einen Spinner.

<Button disabled>Nicht verfügbar</Button>
<Button loading>Wird gesendet...</Button>
<Button fullWidth>Volle Breite</Button>

Mit Icon

Icon-Positionen

Icons können links oder rechts vom Text platziert werden. Für reine Icon-Buttons gibt es iconOnly mit aria-label.

<Button iconPosition="left">
  <svg slot="icon" ...>...</svg>
  Weiter
</Button>

<Button variant="outline" iconPosition="right">
  Download
  <svg slot="icon" ...>...</svg>
</Button>

Installation

cp-components add button