Кнопка

Кнопка — это то, на что человек нажимает, чтобы что-то произошло. button() рисует настоящий <button> с type="button", поэтому кнопка внутри формы не отправит её случайно.

Простая кнопка

По умолчанию — сплошная, primary, среднего размера. Потомки это подпись, всё остальное — пропсы.

stack({ direction: 'row', gap: 'md' },
  button('Раз'),
  button('Два'),
  button('Три'),
)

Варианты

Пять уровней выразительности: от единственного призыва к действию на странице до чего-то, что читается как ссылка.

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'),
)

Цвета

Все оформленные компоненты черпают из одних и тех же пяти палитр, поэтому кнопка с color: 'danger' и уведомление с color: 'danger' согласуются, ничего не зная друг о друге.

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'),
)

Размеры

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

Иконки

Передайте любую SVG-разметку в startIcon или endIcon. Иконки задаются в em, поэтому масштабируются вместе с кнопкой, а не требуют собственного размера.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({
    startIcon: icon('plus'),
  }, 'Новая страница'),
  button({
    variant: 'outline',
    endIcon: icon('arrow-right'),
  }, 'Продолжить'),
)

Кнопка с иконкой

iconButton() — квадратная кнопка с одной иконкой. Её label обязателен: он становится доступным именем, которого сама иконка дать не может, и подсказкой при наведении.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Добавить', icon: icon('plus') }),
  iconButton({ label: 'Изменить', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Удалить', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

Загрузка и отключение

loading подставляет спиннер и выставляет aria-busy, оставляя подпись на месте, чтобы кнопка не меняла ширину посреди действия.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'Сохраняем'),
  button({ variant: 'outline', loading: true }, 'Проверяем'),
  button({ disabled: true }, 'Отключена'),
  button({ variant: 'soft', disabled: true }, 'Отключена'),
)

Ссылки

Дайте кнопке href — и она нарисует <a>: правильный элемент для перехода. У ссылок нет отключённого состояния, поэтому disabled превращается в aria-disabled и убирает её из порядка обхода табуляцией.

Читать документацию Компоненты Обычная ссылка

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/ru/docs' }, 'Читать документацию'),
  button({ href: '/ru/docs/ui', variant: 'outline' }, 'Компоненты'),
  button({ href: '/ru/docs', variant: 'link' }, 'Обычная ссылка'),
)

Во всю ширину

button({ block: true, size: 'lg' }, 'Развернуть сайт')

Пропсы

Всё, чего здесь нет, проваливается на отрендеренный элемент как атрибут — id, data-*, onclick, popovertarget и прочие.

Проп	Тип	По умолчанию	Описание
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Насколько выразительна кнопка.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Из какой палитры брать цвета.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Высота, отступы и размер подписи.
`href`	`string`	—	Рисует <a> вместо <button>.
`startIcon`	`string`	—	Разметка перед подписью.
`endIcon`	`string`	—	Разметка после подписи.
`loading`	`boolean`	`false`	Показывает спиннер и выставляет aria-busy.
`disabled`	`boolean`	`false`	Отключает кнопку или помечает ссылку как aria-disabled.
`block`	`boolean`	`false`	Растягивается на всю ширину контейнера.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Только для формы <button>.

iconButton() принимает те же пропсы плюс обязательный label и icon.