Bouton bascule

Un bouton bascule est activé ou non, et le dit avec aria-pressed. Le gras dans un éditeur de texte, un filtre appliqué, un panneau affiché.

Il n’y a pas d’input caché derrière : aria-pressed est tout l’état, donc une bascule rendue côté serveur montre un réglage, et setPressed() est ce qui le change. Prenez checkbox() quand cela appartient à un formulaire, et toggle() — l’interrupteur — quand c’est un réglage dans une liste.

Bascule de base

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Gras'),
  toggleButton('Italique'),
  toggleButton('Souligné'),
)

Variantes

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'outline', pressed: true }, 'Outline activé'),
    toggleButton({ variant: 'outline' }, 'Outline désactivé'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'ghost', pressed: true }, 'Ghost activé'),
    toggleButton({ variant: 'ghost' }, 'Ghost désactivé'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'soft', pressed: true }, 'Soft activé'),
    toggleButton({ variant: 'soft' }, 'Soft désactivé'),
  ),
)

Tailles

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

Avec des icônes

Une bascule uniquement en icône réclame un nom accessible — passez aria-label, qui tombe sur le bouton.

stack({ direction: 'row', gap: 'sm' },
  toggleButton({
    pressed: true,
    'aria-label': 'Gras',
    title: 'Gras',
    startIcon: icon('bold'),
  }),
  toggleButton({
    'aria-label': 'Italique',
    title: 'Italique',
    startIcon: icon('italic'),
  }),
)

Désactivé

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, 'Activé, verrouillé'),
  toggleButton({ disabled: true }, 'Désactivé, verrouillé'),
)

Lui faire faire quelque chose

Un appel retourne l’attribut ; le style suit. Dans un toggleGroup() à choix unique, il relâche aussi ses voisins.

toggleButton({ onclick: "import('/su/pressed.js').then(m=>m.set(this))" }, 'Bold')

Ou depuis votre propre module, quand il y en a déjà un qui tourne :

import { setPressed } from 'sitelo/ui/client'

setPressed('bold')

Props

Prop	Type	Défaut	Description
`pressed`	`boolean`	`false`	Pose aria-pressed. Ensuite, setPressed() le change.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	L’allure du bouton non enfoncé.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	La même échelle que button().
`disabled`	`boolean`	`false`	Désactive le bouton.

Tout le reste tombe sur button() — startIcon, endIcon, onclick et le reste. Pour un ensemble, voyez toggleGroup().