Button

Button задаёт иерархию, тон и плотность действия. href превращает кнопку в ссылку с тем же визуальным весом.

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

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

Действие на экране или в форме: «Сохранить черновик», «Отменить».
Переход, оформленный как действие, — через href (рендерится ссылка).
Иконка-действие в тулбаре — short с обязательным aria-label.

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

Навигация внутри текста — это обычная ссылка, не кнопка.
Переключение состояния или режима — кнопка совершает действие, а не хранит выбор.
Метка или фильтр — кнопка не носит значение.

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

switch — мгновенное включение/выключение настройки
segmented-control — выбор одного режима из короткого ряда
tag — кликабельная метка-фильтр (selectable)

Конструктор

Меняйте свойства Button, сочетайте их и проверяйте результат в одном живом экземпляре.

Варианты и тон

variant задаёт иерархию, tone — смысл; danger сочетается с каждым уровнем.

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

<Button variant="default">
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
  Button
</Button>

<Button variant="accent">
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
  Button
</Button>

<Button variant="ghost">
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
  Button
</Button>

<Button variant="default" tone="danger">{t("Удалить файл")}</Button>
<Button variant="accent" tone="danger">{t("Удалить файл")}</Button>
<Button variant="ghost" tone="danger">{t("Удалить файл")}</Button>

Размеры

m — основной, s — компактный; точные метрики задаёт productScope.

<script>
import Button from "$lib/ui/Button.svelte";
</script>

<Button variant="default" size="m">Medium</Button>
<Button variant="default" size="s">Small</Button>
<Button variant="accent" size="m">Medium</Button>
<Button variant="accent" size="s">Small</Button>

Иконки

Ведущая, хвостовая или обе — иконка activity 20px.

<script>
import Button from "$lib/ui/Button.svelte";
import Pulse from "phosphor-svelte/lib/Pulse";
</script>

<Button variant="default">
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
  Leading
</Button>

<Button variant="default">
  Trailing
  {#snippet trailingIcon()}<Pulse aria-hidden="true" />{/snippet}
</Button>

<Button variant="default">
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
  Both
  {#snippet trailingIcon()}<Pulse aria-hidden="true" />{/snippet}
</Button>

Короткая

Только иконка, без текста — обязателен aria-label.

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

<Button variant="default" short aria-label={t("Активность")}>
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
</Button>

<Button variant="accent" short aria-label={t("Активность")}>
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
</Button>

<Button variant="default" size="s" short aria-label={t("Активность")}>
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
</Button>

Индикатор

Точка-нотификатор в углу. С variant="ghost" несовместима — не рендерится.

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

<Button variant="default" indicator>
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
  Button
</Button>

<Button variant="accent" indicator>Button</Button>

<Button variant="default" size="s" short indicator aria-label={t("Активность")}>
  {#snippet leadingIcon()}<Pulse aria-hidden="true" />{/snippet}
</Button>