Famille · Overlays et feedback

Overlays

Stable

Dialogues, infobulles et notifications pour actions ponctuelles sans couplage produit.

Modal

Le Modal s’ouvre au clic sur un overlay plein écran (position: fixed) : cette démo reste interactive en Svelte, sans équivalent neutre encadré.

Tooltip

Voir le code (Svelte)

<Tooltip content="Contextual information">
  <Button variant="secondary">Hover or focus</Button>
</Tooltip>

OverflowMenu

Voir le code (Svelte)

<OverflowMenu
  triggerLabel="Actions de ligne"
  open
  placement="bottom-start"
  items={[{"kind":"group","label":"Modifier"},{"value":"rename","label":"Renommer"},{"value":"duplicate","label":"Dupliquer"},{"kind":"divider"},{"kind":"group","label":"Distribuer"},{"value":"share","label":"Partager"},{"value":"archive","label":"Archiver"},{"kind":"divider"},{"value":"delete","label":"Supprimer","danger":true}]}
/>

Panneau ouvert (open) et figé pour la démonstration.

Feedback

Saved

The tenant theme was compiled.

Failed

The adapter mapping is incomplete.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Toast tone="success" title="Saved" message="The tenant theme was compiled." />
  <Toast tone="error" title="Failed" message="The adapter mapping is incomplete." />
</div>

API

Component	Props	Semantics
`Modal`	`open`, `title`, `description`, `onclose`	`role="dialog"`, `aria-modal`
`Tooltip`	`content`, `placement`	`role="tooltip"`
`Toast`	`tone`, `title`, `message`	`role="status"` or `role="alert"`
`OverflowMenu`	`items`, `open`, `placement`, `onselect`	`aria-haspopup="menu"`, `role="menu"`

Tokens utilisés

--st-component-overlay-backdrop
--st-component-overlay-surface
--st-component-tooltip-background
--st-component-tooltip-text
--st-component-toast-background
--st-component-toast-errorBorder