Button Komponente

Die Button-Komponente bietet eine vielseitige und anpassbare Schaltfläche für Ihre Dokumentation. Sie unterstützt verschiedene Varianten, Größen und Zustände.

Grundlegende Verwendung

<Button>Klick mich</Button>

Varianten

Primäre Varianten

<Button variant="primary">Primär</Button>
<Button variant="secondary">Sekundär</Button>
<Button variant="outline">Umriss</Button>
<Button variant="ghost">Ghost</Button>

Kontextuelle Varianten

<Button variant="success">Erfolg</Button>
<Button variant="warning">Warnung</Button>
<Button variant="danger">Gefahr</Button>
<Button variant="info">Information</Button>

Größen

Verschiedene Größenoptionen für unterschiedliche Anwendungsfälle:

<Button size="sm">Klein</Button>
<Button size="md">Mittel</Button>
<Button size="lg">Groß</Button>
<Button size="xl">Extra Groß</Button>

Zustände

Deaktiviert

<Button disabled>Deaktiviert</Button>
<Button variant="primary" disabled>Primär Deaktiviert</Button>

Ladezustand

<Button loading>Wird geladen...</Button>
<Button variant="primary" loading>Speichern</Button>

Links als Buttons

Verwenden Sie die href Eigenschaft, um Links wie Buttons aussehen zu lassen:

<Button href="/docs/getting-started" variant="primary">
  Erste Schritte
</Button>

<Button href="https://github.com/tajo" variant="outline" external>
  GitHub ansehen
</Button>

Mit Icons

Kombinieren Sie Buttons mit Icons für bessere visuelle Kommunikation:

<Button variant="primary">
  📥 Herunterladen
</Button>

<Button variant="outline">
  ⚙️ Einstellungen
</Button>

<Button variant="danger">
  🗑️ Löschen
</Button>

Button-Gruppen

Gruppieren Sie verwandte Buttons zusammen:

<div className="flex gap-2">
  <Button variant="outline">Abbrechen</Button>
  <Button variant="primary">Speichern</Button>
</div>

Praktische Beispiele

Call-to-Action Buttons

<div className="text-center space-y-4">
  <h2>Bereit anzufangen?</h2>
  <p>Beginnen Sie noch heute mit Tajo und beschleunigen Sie Ihre Entwicklung.</p>
  <Button href="/docs/getting-started" variant="primary" size="lg">
    Jetzt loslegen
  </Button>
</div>

Navigationshilfen

<div className="flex justify-between">
  <Button href="/docs/authentication" variant="outline">
    ← Vorheriges: Authentifizierung
  </Button>
  <Button href="/docs/components/badge" variant="outline">
    Nächstes: Badge Komponente →
  </Button>
</div>

Download-Buttons

<Button
  href="/downloads/tajo-sdk.zip"
  variant="primary"
  download
>
  SDK herunterladen (2.1 MB)
</Button>

Anpassung

Benutzerdefinierte Klassen

<Button className="bg-gradient-to-r from-purple-500 to-blue-500 text-white">
  Verlaufs-Button
</Button>

Vollbreite

<Button variant="primary" fullWidth>
  Vollbreite Button
</Button>

Accessibility

Alle Buttons haben angemessene Fokus-Indikatoren
Deaktivierte Buttons sind für Screenreader erkennbar
Links mit external haben automatische rel="noopener noreferrer" Attribute
Konsistente Tastaturnavigation

Bewährte Praktiken

Primäre Aktionen: Verwenden Sie primary für die wichtigste Aktion auf einer Seite
Sekundäre Aktionen: Verwenden Sie secondary oder outline für weniger wichtige Aktionen
Destruktive Aktionen: Verwenden Sie danger für Lösch- oder gefährliche Operationen
Konsistente Größen: Verwenden Sie konsistente Button-Größen in verwandten Gruppen
Aussagekräftige Labels: Verwenden Sie klare, handlungsorientierte Texte

API Referenz

Eigenschaft	Typ	Standard	Beschreibung
`variant`	string	`'default'`	Button-Stil (`primary`, `secondary`, `outline`, `ghost`, `success`, `warning`, `danger`, `info`)
`size`	string	`'md'`	Button-Größe (`sm`, `md`, `lg`, `xl`)
`disabled`	boolean	`false`	Deaktiviert den Button
`loading`	boolean	`false`	Zeigt Ladezustand an
`href`	string	-	URL für Link-Buttons
`external`	boolean	`false`	Öffnet Links in neuem Tab
`fullWidth`	boolean	`false`	Button nimmt volle Breite ein
`className`	string	-	Zusätzliche CSS-Klassen