Buttons

Button Varianten

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-ghost">Ghost Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>

Button Größen

<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-primary btn-lg">Large Button</button>

Button Zustände

Full Width Buttons

<button class="btn btn-primary btn-block">Full Width Button</button>

Button mit Icons

Best Practices

• Verwenden Sie Primary Buttons für die wichtigste Aktion auf einer Seite
• Nutzen Sie Secondary Buttons für alternative Aktionen
• Ghost Buttons eignen sich für tertiäre Aktionen oder Navigation
• Halten Sie Button-Texte kurz und aktionsorientiert
• Verwenden Sie konsistente Größen innerhalb eines Kontexts
• Stellen Sie sicher, dass Buttons eine Mindestgröße von 44x44px für Touch-Geräte haben