Composant · Action

ButtonGroup

Stable

Regroupe des Button : look segmenté joint (attached) ou simplement espacé via gap. Expose role="group" avec un libellé a11y.

Exemples

attached (segmenté)

Voir le code (Svelte)

<ButtonGroup attached label="Vue">
  <Button variant="secondary">Jour</Button>
  <Button variant="secondary">Semaine</Button>
  <Button variant="secondary">Mois</Button>
</ButtonGroup>

gap=2 (espacé)

Voir le code (Svelte)

<ButtonGroup gap={2} label="Actions">
  <Button variant="ghost">Annuler</Button>
  <Button variant="primary">Enregistrer</Button>
</ButtonGroup>

API

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`attached`	`boolean`	`false`
`gap`	`number` (pas 0–12, ignoré si attached)	–
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`label`	`string`	–

En mode attached, seuls les coins extrêmes sont arrondis. Le gap suit l'échelle d'espacement.

Tokens utilisés

--st-spacing-1 … --st-spacing-12