Button
Auslöser für Aktionen — emittiert das semantische Event activate
Nutzt: ui.icon
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 | Builder-Label |
|---|---|---|---|
| label * | string | — | Beschriftung |
| variant | string: primary | secondary | ghost | danger | "primary" | Variante |
| size | string: sm | md | lg | "md" | Größe |
| disabled | boolean | false | Deaktiviert |
| type | string: button | submit | "button" | Typ (submit = sendet das umgebende Formular) |
| icon | string | "" | Icon (leer = keins) |
| iconPosition | string: start | end | "start" | Icon-Seite |
| loading | boolean | false | Lädt (Spinner, nicht klickbar) |
| fullWidth | boolean | false | Volle Breite |
* Pflicht-Prop
Events & Slots
Events:
⚡ activate — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| 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.emphasisborder.hairlinecolor.action.on-primarycolor.action.on-secondarycolor.action.primarycolor.action.primary-activecolor.action.primary-hovercolor.action.secondarycolor.action.secondary-bordercolor.action.secondary-hovercolor.border.defaultcolor.status.dangercolor.text.inversecolor.text.linkduration.fastduration.sloweasing.standardelevation.controlfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultleading.tightradius.controlradius.fullsize.4state.disabled-opacitytext.lgtext.mdtext.smweight.semibold
LLM-Notizen
ui.button
Der Basis-Button. Varianten primary | secondary | ghost | danger, Größen sm | md | lg.
Wann nutzen
- Für Einzel-Aktionen in Formularen/Karten. In Navigations-/Seitenkopf-Kontexten haben navigation/page-header eigene
actions-Props. - Icon-only:
ui.icon-button. Verbundene Segmente:ui.button-group.
Beispiel-Node
{"definition": "ui.button", "props": {"label": "Speichern", "variant": "primary"}, "on": {"activate": {"action": "action.notify.show", "params": {"title": "Gespeichert", "tone": "success"}}}}
Hinweise
- Emittiert
activate(data-invisible-event), Bindings laufen über den Node (on). - Secondary rendert mit
color.action.secondary-border+elevation.control(Untitled-Look, Theme-gesteuert).