Composant · Navigation

NavActionStack

Stable

Pile d'actions qui encode la hiérarchie dans le type : au plus une action kind:"primary" (les suivantes sont dégradées en secondary avec un avertissement). La couleur sémantique « danger » n'est pas détournée en catégorie — la dangerZone destructrice est rendue à part, sous un Divider et un overline « zone sensible », en ton danger pleine largeur. Réutilise le Button du DS ; style token-only.

Exemples

Une action primaire, deux secondaires, et une zone sensible destructrice isolée.

Pile d'actions

Zone sensible

Voir le code (Svelte)

<div class="navstack-demo-col">
  <NavActionStack
    label="Actions du compte"
    actions={[{"label":"Enregistrer","kind":"primary"},{"label":"Dupliquer","kind":"secondary"},{"label":"Exporter","kind":"secondary"}]}
    dangerZone={{"label":"Supprimer le projet"}}
    dangerLabel="Zone sensible"
  />
</div>

API du composant

Prop	Type	Défaut	Description
`actions`	`NavAction[]`	`[]`	Actions de la pile (label, kind, href/onClick, icon, disabled).
`dangerZone`	`NavActionDangerZone`	–	Action destructrice isolée (toujours en ton danger).
`dangerLabel`	`string`	`'Zone sensible'`	Libellé de l'overline de la zone sensible.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Pile pleine largeur ou rangée.
`label`	`string`	`'Actions'`	Étiquette a11y du groupe d'actions.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

Tokens CSS

Variable CSS	Description
`--st-spacing-4` / `--st-spacing-2`	Écarts entre les actions et entre les zones.
`--st-component-overline-*`	Style de l'overline « zone sensible ».