Button-Gruppe — ui.button-group
Segmentierte Button-Gruppe (Untitled-UI-Muster): verbundene Secondary-Buttons mit geteilten Rändern, aktives Segment hervorgehoben
UI Elementv1.0.1Aktionenweb.documentweb.applicationdesktop.shellbuilder.preview
Beispiele
Zeitraum-Wahl (aktives Segment)
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
items * | array | — |
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--button-group-action-on-secondary | var(--color-action-on-secondary) |
--button-group-action-secondary | var(--color-action-secondary) |
--button-group-action-secondary-hover | var(--color-action-secondary-hover) |
--button-group-border-strong | var(--color-border-strong) |
--button-group-elevation-control | var(--elevation-control) |
--button-group-radius-control | var(--radius-control) |
--button-group-surface-sunken | var(--color-surface-sunken) |
Genutzte Design-Tokens
border.hairline color.action.on-secondary color.action.secondary color.action.secondary-border color.action.secondary-hover color.border.strong color.surface.sunken elevation.control radius.control size.2 size.4 text.sm weight.semibold