Botão de alternância

Um botão de alternância está ligado ou desligado, e di-lo com aria-pressed. O negrito num editor de texto, um filtro aplicado, um painel que está à vista.

Não há input escondido por trás: aria-pressed é o estado todo, por isso uma alternância renderizada no servidor mostra uma definição e setPressed() é o que a muda. Usa checkbox() quando pertencer a um formulário e toggle() — o interruptor — quando for uma definição numa lista.

Alternância básica

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Negrito'),
  toggleButton('Itálico'),
  toggleButton('Sublinhado'),
)

Variantes

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'outline', pressed: true }, 'Outline ligado'),
    toggleButton({ variant: 'outline' }, 'Outline desligado'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'ghost', pressed: true }, 'Ghost ligado'),
    toggleButton({ variant: 'ghost' }, 'Ghost desligado'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'soft', pressed: true }, 'Soft ligado'),
    toggleButton({ variant: 'soft' }, 'Soft desligado'),
  ),
)

Tamanhos

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, 'Pequeno'),
  toggleButton({ size: 'md', pressed: true }, 'Médio'),
  toggleButton({ size: 'lg', pressed: true }, 'Grande'),
)

Com ícones

Uma alternância só de ícone precisa de nome acessível — passa aria-label, que cai no botão.

stack({ direction: 'row', gap: 'sm' },
  toggleButton({
    pressed: true,
    'aria-label': 'Negrito',
    title: 'Negrito',
    startIcon: icon('bold'),
  }),
  toggleButton({
    'aria-label': 'Itálico',
    title: 'Itálico',
    startIcon: icon('italic'),
  }),
)

Desativado

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, 'Ligado, bloqueado'),
  toggleButton({ disabled: true }, 'Desligado, bloqueado'),
)

Pô-lo a fazer alguma coisa

Uma chamada vira o atributo; o estilo vai atrás. Dentro de um toggleGroup() de escolha única, larga também os irmãos.

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

Ou a partir do teu próprio módulo, quando já houver um a correr:

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

setPressed('bold')

Props

Prop	Tipo	Predefinição	Descrição
`pressed`	`boolean`	`false`	Define aria-pressed. Depois é setPressed() que o muda.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	O aspeto do botão quando não está carregado.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	A mesma escala do button().
`disabled`	`boolean`	`false`	Desativa o botão.

Tudo o resto cai no button() — startIcon, endIcon, onclick e os restantes. Para um conjunto deles, vê toggleGroup().