Button
Auslöser für Aktionen — emittiert das semantische Event activate
Beispiele
Primär
Sekundär
Ghost
Klein
Groß
Deaktiviert
Ungültige Variante → Fallback
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label * | string | — | Beschriftung |
| variant | string: primary | secondary | ghost | "primary" | Variante |
| size | string: sm | md | lg | "md" | Größe |
| disabled | boolean | false | Deaktiviert |
* Pflicht-Prop
Events & Slots
Events:
⚡ activate — im Surface per on: {<event>: {action, params}} verdrahtbar.
Genutzte Design-Tokens
border.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.text.linkduration.fasteasing.standardelevation.controlfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultleading.tightradius.controlstate.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).