Button — ui.button
Auslöser für Aktionen — emittiert das semantische Event activate
Beispiele
Primär
Sekundär
Ghost
Klein
Groß
Deaktiviert
Ungültige Variante → Fallback
Gefahr (destruktiv)
Lädt (aria-busy, nicht klickbar)
Icon rechts + volle Breite
Submit fürs Formular
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
label * | string | — |
variant | string: primary | secondary | ghost | danger | "primary" |
size | string: sm | md | lg | "md" |
disabled | boolean | false |
type | string: button | submit | "button" |
icon | string | "" |
iconPosition | string: start | end | "start" |
loading | boolean | false |
fullWidth | boolean | false |
Events & Slots
Events: activate
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--button-background | var(--color-action-primary) |
--button-background-hover | var(--color-action-primary-hover) |
--button-background-active | var(--color-action-primary-active) |
--button-color | var(--color-action-on-primary) |
--button-radius | var(--radius-control) |
--button-border | transparent |
Genutzte Design-Tokens
border.emphasis border.hairline color.action.on-primary color.action.on-secondary color.action.primary color.action.primary-active color.action.primary-hover color.action.secondary color.action.secondary-border color.action.secondary-hover color.border.default color.status.danger color.text.inverse color.text.link duration.fast duration.slow easing.standard elevation.control focus.ring-color focus.ring-offset focus.ring-width font.family.default leading.tight radius.control radius.full size.4 state.disabled-opacity text.lg text.md text.sm weight.semibold