Button-Gruppe

Segmentierte Button-Gruppe (Untitled-UI-Muster): verbundene Secondary-Buttons mit geteilten Rändern, aktives Segment hervorgehoben

Im Builder nutzen

Beispiele

Zeitraum-Wahl (aktives Segment)

12 Monate30 Tage7 Tage24 Stunden

Eigenschaften

Prop	Typ	Default	Builder-Label
items *	array	—	Segmente

* Pflicht-Prop

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-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.hairlinecolor.action.on-secondarycolor.action.secondarycolor.action.secondary-bordercolor.action.secondary-hovercolor.border.strongcolor.surface.sunkenelevation.controlradius.controlsize.2size.4text.smweight.semibold