Composants

MoreMenu nouveau

Le menu « kebab » (⋮) pour les actions de dépassement. C'est un DropdownMenu dont le déclencheur est un bouton-icône compact — idéal en fin de ligne de tableau ou de carte, quand l'espace ne permet pas d'exposer chaque action.

Nouveau dans le DS 2.0. Remplace les boutons « ⋮ » maison : mêmes items data-driven que DropdownMenu, avec un déclencheur icône dont l'aria-label par défaut est « Plus d'options ».

import { MoreMenu } from "@forme-ch/ui/controls";

<MoreMenu
  items={[
    { label: "Éditer", icon: <PencilSimpleIcon />, onClick: edit },
    { label: "Dupliquer", icon: <CopyIcon />, onClick: duplicate },
    { label: "Archiver", icon: <ArchiveIcon />, onClick: archive },
    { type: "divider" },
    { label: "Supprimer", icon: <TrashIcon />, variant: "destructive", onClick: remove },
  ]}
/>

En fin de ligne

Usage canonique : regrouper les actions secondaires d'une ligne. Personnalise l'label a11y pour le contexte.

<MoreMenu
  label="Actions de la facture"
  items={[
    { label: "Marquer payée", onClick: markPaid },
    { label: "Relancer", onClick: remind },
    { type: "divider" },
    { label: "Supprimer", variant: "destructive", onClick: remove },
  ]}
/>

Props

Prop	Type	Défaut	Description
`items` *	`DropdownMenuOption[]`	—	Items data-driven (mêmes formes que `DropdownMenu` : item, `divider`, section).
`label`	`string`	`"Plus d'options"`	aria-label du déclencheur icône « ⋮ ».
`variant`	`ButtonVariant`	`"ghost"`	Variante du bouton déclencheur.
`size`	`ControlSize`	`"md"`	sm · md · lg.
`placement`	`Placement`	—	above · below · start · end.
`alignment`	`Alignment`	—	start · center · end.
`className`	`string`	—	Classe CSS additionnelle.
`style`	`CSSProperties`	—	Styles inline.

Accessibilité

Le déclencheur est un bouton-icône : sans texte visible, son label (par défaut « Plus d'options ») fournit le nom accessible. Personnalise-le quand plusieurs MoreMenu coexistent sur une page (« Actions de la facture », « Actions du client »). Ouverture, focus clavier et fermeture suivent le même pattern APG que DropdownMenu.

Do & Don't

✓ À faire

Réserver le kebab aux actions secondaires. Donner un label contextuel unique quand il y en a plusieurs.

✕ À éviter

Y cacher l'action primaire d'une ligne. Laisser le label par défaut sur des dizaines de lignes identiques sans contexte.