Bouton

Un bouton, c’est ce sur quoi on clique pour faire arriver quelque chose. button() rend un vrai <button> avec type="button" : en poser un dans un formulaire ne le soumet donc pas par accident.

Bouton de base

Par défaut : solide, primary, taille moyenne. Les enfants sont le libellé ; tout le reste est une prop.

stack({ direction: 'row', gap: 'md' },
  button('Un'),
  button('Deux'),
  button('Trois'),
)

Variantes

Cinq niveaux d’emphase, du seul appel à l’action de la page jusqu’à ce qui se lit comme un lien.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'solid' }, 'Solid'),
  button({ variant: 'soft' }, 'Soft'),
  button({ variant: 'outline' }, 'Outline'),
  button({ variant: 'ghost' }, 'Ghost'),
  button({ variant: 'link' }, 'Link'),
)

Couleurs

Tous les composants thématisés puisent dans les mêmes cinq palettes : un bouton color: 'danger' et une alerte color: 'danger' s’accordent sans que l’un connaisse l’autre.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ color: 'primary' }, 'Primary'),
  button({ color: 'neutral' }, 'Neutral'),
  button({ color: 'success' }, 'Success'),
  button({ color: 'warning' }, 'Warning'),
  button({ color: 'danger' }, 'Danger'),
)

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'soft', color: 'primary' }, 'Primary'),
  button({ variant: 'soft', color: 'neutral' }, 'Neutral'),
  button({ variant: 'soft', color: 'success' }, 'Success'),
  button({ variant: 'soft', color: 'warning' }, 'Warning'),
  button({ variant: 'soft', color: 'danger' }, 'Danger'),
)

Tailles

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  button({ size: 'sm' }, 'Petit'),
  button({ size: 'md' }, 'Moyen'),
  button({ size: 'lg' }, 'Grand'),
)

Icônes

Passez n’importe quel balisage SVG dans startIcon ou endIcon. Les icônes sont dimensionnées en em : elles suivent le bouton au lieu d’exiger une taille à elles.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({
    startIcon: icon('plus'),
  }, 'Nouvelle page'),
  button({
    variant: 'outline',
    endIcon: icon('arrow-right'),
  }, 'Continuer'),
)

Bouton-icône

iconButton() est un bouton carré qui porte une seule icône. Son label est obligatoire — il devient le nom accessible que l’icône ne peut pas fournir, et l’infobulle au survol.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Ajouter', icon: icon('plus') }),
  iconButton({ label: 'Modifier', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Supprimer', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

Chargement et désactivation

loading met un spinner à la place et pose aria-busy, en laissant le libellé pour que le bouton ne change pas de largeur en pleine action.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'Enregistrement'),
  button({ variant: 'outline', loading: true }, 'Vérification'),
  button({ disabled: true }, 'Désactivé'),
  button({ variant: 'soft', disabled: true }, 'Désactivé'),
)

Liens

Donnez un href à un bouton et il rend une <a> — le bon élément pour ce qui navigue. Les ancres n’ont pas d’état désactivé, donc disabled devient aria-disabled et la retire de l’ordre de tabulation.

Lire la documentation Composants Lien simple

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/fr/docs' }, 'Lire la documentation'),
  button({ href: '/fr/docs/ui', variant: 'outline' }, 'Composants'),
  button({ href: '/fr/docs', variant: 'link' }, 'Lien simple'),
)

Pleine largeur

button({ block: true, size: 'lg' }, 'Déployer le site')

Props

Tout ce qui n’est pas listé ici tombe sur l’élément rendu sous forme d’attribut — id, data-*, onclick, popovertarget et le reste.

Prop	Type	Défaut	Description
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Le poids que porte le bouton.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	La palette utilisée.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Hauteur, marges internes et taille du libellé.
`href`	`string`	—	Rend une <a> au lieu d’un <button>.
`startIcon`	`string`	—	Balisage placé avant le libellé.
`endIcon`	`string`	—	Balisage placé après le libellé.
`loading`	`boolean`	`false`	Affiche un spinner et pose aria-busy.
`disabled`	`boolean`	`false`	Désactive le bouton, ou marque un lien aria-disabled.
`block`	`boolean`	`false`	S’étire sur toute la largeur du conteneur.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Uniquement pour la forme <button>.

iconButton() prend les mêmes props plus un label obligatoire et une icon.