Botón de alternancia

Un botón de alternancia está encendido o apagado, y lo dice con aria-pressed. La negrita en un editor de texto, un filtro aplicado, un panel que se está viendo.

No hay input oculto detrás: aria-pressed es todo el estado, así que una alternancia renderizada en el servidor muestra un ajuste y setPressed() es lo que lo cambia. Recurre a checkbox() cuando pertenezca a un formulario y a toggle() — el interruptor — cuando sea un ajuste dentro de una lista.

Alternancia básica

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Negrita'),
  toggleButton('Cursiva'),
  toggleButton('Subrayado'),
)

Variantes

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

Tamaños

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, 'Pequeño'),
  toggleButton({ size: 'md', pressed: true }, 'Mediano'),
  toggleButton({ size: 'lg', pressed: true }, 'Grande'),
)

Con iconos

Una alternancia de solo icono necesita nombre accesible: pasa aria-label, que cae hasta el botón.

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

Deshabilitado

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

Hacer que haga algo

Una llamada cambia el atributo; el estilo lo sigue. Dentro de un toggleGroup() de una sola opción, además suelta a sus hermanos.

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

O desde tu propio módulo, cuando ya haya uno en marcha:

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

setPressed('bold')

Props

Prop	Tipo	Por defecto	Descripción
`pressed`	`boolean`	`false`	Pone aria-pressed. Después lo cambia setPressed().
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Cómo se ve el botón sin pulsar.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	La misma escala que button().
`disabled`	`boolean`	`false`	Deshabilita el botón.

Todo lo demás cae a button(): startIcon, endIcon, onclick y demás. Para un conjunto de ellos, mira toggleGroup().