Toggle Button

Toggle Button хранит булево pressed и сообщает его через aria-pressed. Это самостоятельный режим, а не вариант или тон обычной кнопки.

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

Одна команда имеет устойчивое состояние: «закрепить», «показать сетку», «жирный».
Повторное нажатие должно отменять тот же режим на месте.

Не использовать:

Нужно один раз запустить действие — используй Button.
Настройка имеет явные подписи включённого и выключенного состояния — используй Switch.
Булево значение отправляется как поле формы — используй Checkbox.

Альтернативы:

button — одноразовое действие без устойчивого состояния
switch — мгновенная настройка с явным on/off-смыслом
checkbox — булево значение внутри формы

Базовый

Один режим открыто показывает текущее булево состояние.

Сетка выключена

<!--
  🟢

  Базовый пример связывает Toggle Button с булевым состоянием режима.
  Подпись результата делает устойчивое значение заметным вне кнопки.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ToggleButton from "$lib/ui/ToggleButton.svelte";

let gridVisible = $state(false);
</script>

<div style="display: flex; align-items: center; gap: var(--sp-2);">
	<ToggleButton bind:pressed={gridVisible}>{t("Показать сетку")}</ToggleButton>
	<span aria-live="polite">
		{gridVisible ? t("Сетка включена") : t("Сетка выключена")}
	</span>
</div>

Размеры

Размеры меняют плотность, сохраняя одну семантику.

<!--
  🟢

  Пример размеров сравнивает компактный и обычный Toggle Button. Плотность
  меняется независимо от устойчивого состояния on.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ToggleButton from "$lib/ui/ToggleButton.svelte";

let compact = $state(false);
let regular = $state(true);
</script>

<div style="display: flex; align-items: center; gap: var(--sp-2);">
	<ToggleButton size="s" bind:pressed={compact}>{t("Компактный")}</ToggleButton>
	<ToggleButton size="m" bind:pressed={regular}>{t("Обычный")}</ToggleButton>
</div>

Короткий

Icon-only режим требует доступного имени.

<!--
  🟢

  Короткий пример показывает квадратные icon-only режимы с доступными
  именами. Иконки декоративны, а состояние сообщает сама toggle-кнопка.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ToggleButton from "$lib/ui/ToggleButton.svelte";
import GridFour from "phosphor-svelte/lib/GridFour";
import PushPin from "phosphor-svelte/lib/PushPin";

let grid = $state(true);
let pinned = $state(false);
</script>

<div style="display: flex; align-items: center; gap: var(--sp-2);">
	<ToggleButton short aria-label={t("Показать сетку")} bind:pressed={grid}>
		<GridFour aria-hidden="true" />
	</ToggleButton>
	<ToggleButton short aria-label={t("Закрепить панель")} bind:pressed={pinned}>
		<PushPin aria-hidden="true" />
	</ToggleButton>
</div>