Button
Aktionen in sieben Varianten und vier Größen. Alle Buttons teilen Fokusring, Druck-Feedback, Touch-Mindestfläche und Ladezustand über die gemeinsame Control-Basis; die Variante inverse ist für Navy-Bänder gedacht.
Varianten
Sechs Varianten für unterschiedliche Gewichtungen: Primary für die Hauptaktion, Link für Navigation in Textform.
primarysecondaryoutlineghostdangerlink
Größen
sm, md und lg folgen den Dichte-Tokens; icon ist quadratisch und für Symbolaktionen gedacht.
Zustände
Loading hält die Breite stabil, ignoriert Klicks und bleibt fokussierbar. Disabled reduziert die Deckkraft.
Mit Icon
Icons sitzen links, rechts oder allein in einer quadratischen Icon-Schaltfläche.
Auf Navy
Auf dunklen Bändern steht die inverse Variante zur Verfügung: transparent, mit heller Schrift und 1,5-px-Ring.
Als Link
Über die render-Prop wird derselbe Button als Link ausgegeben – Semantik und Tastaturverhalten bleiben erhalten.
Playground
Varianten, Größen und Zustände frei kombinieren.