Кнопка-переключатель

Кнопка-переключатель либо включена, либо нет, и сообщает об этом через aria-pressed. Полужирный в текстовом редакторе, применённый фильтр, открытая панель.

Скрытого инпута за ней нет: aria-pressed — это и есть всё состояние, поэтому отрисованный на сервере переключатель показывает настройку, а меняет её setPressed(). Возьмите checkbox(), если место элемента в форме, и toggle(), то есть тумблер, если это настройка в списке.

Простой переключатель

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Полужирный'),
  toggleButton('Курсив'),
  toggleButton('Подчёркнутый'),
)

Варианты

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'outline', pressed: true }, 'Outline включён'),
    toggleButton({ variant: 'outline' }, 'Outline выключен'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'ghost', pressed: true }, 'Ghost включён'),
    toggleButton({ variant: 'ghost' }, 'Ghost выключен'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'soft', pressed: true }, 'Soft включён'),
    toggleButton({ variant: 'soft' }, 'Soft выключен'),
  ),
)

Размеры

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, 'Маленькая'),
  toggleButton({ size: 'md', pressed: true }, 'Средняя'),
  toggleButton({ size: 'lg', pressed: true }, 'Большая'),
)

С иконками

Переключателю из одной иконки нужно доступное имя: передайте aria-label, он проваливается на кнопку.

stack({ direction: 'row', gap: 'sm' },
  toggleButton({
    pressed: true,
    'aria-label': 'Полужирный',
    title: 'Полужирный',
    startIcon: icon('bold'),
  }),
  toggleButton({
    'aria-label': 'Курсив',
    title: 'Курсив',
    startIcon: icon('italic'),
  }),
)

Отключено

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, 'Включена, закреплена'),
  toggleButton({ disabled: true }, 'Выключена, закреплена'),
)

Заставить её что-то делать

Один вызов переворачивает атрибут; оформление следует за ним. Внутри toggleGroup() с одним выбором он заодно отпускает соседей.

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

Или из вашего собственного модуля, если он и так уже работает:

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

setPressed('bold')

Пропсы

Проп	Тип	По умолчанию	Описание
`pressed`	`boolean`	`false`	Выставляет aria-pressed. Дальше его меняет setPressed().
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Как выглядит ненажатая кнопка.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Та же шкала, что и у button().
`disabled`	`boolean`	`false`	Отключает кнопку.

Всё остальное проваливается в button(): startIcon, endIcon, onclick и прочее. Про набор таких кнопок см. toggleGroup().