Button и ButtonGroup

Компонент Button является базовым элементом интерфейса, предоставляющим возможность пользователю совершать действия через клики. В SvelteKit UI библиотеках кнопки обычно реализованы с высокой настраиваемостью и поддержкой реактивного взаимодействия.

Основные свойства Button

  1. type Определяет тип кнопки в HTML. Возможные значения:

    • button — стандартная кнопка;
    • submit — кнопка для отправки формы;
    • reset — сброс значений формы.

    Пример:

    <Button type="submit">Отправить</Button>

  2. variant Управляет визуальным стилем кнопки. Стандартные варианты:

    • primary — основная кнопка, привлекает внимание;
    • secondary — вспомогательная кнопка;
    • danger — кнопка для опасных действий;
    • outline — контурная кнопка с прозрачным фоном.
    <Button variant="danger">Удалить</Button>

  3. size Задает размеры кнопки: small, medium, large. Размер влияет на padding, шрифты и пропорции иконок.

    <Button size="large">Подробности</Button>

  4. disabled Флаг блокировки кнопки, предотвращающий клики.

    <Button disabled={true}>Недоступно</Button>

  5. loading Некоторые библиотеки поддерживают индикатор загрузки внутри кнопки. В таком состоянии кнопка может показывать спиннер и блокировать дальнейшие клики.

    <Button loading={true}>Загрузка...</Button>

События Button

  • on:click — стандартное событие клика.
  • on:focus и on:blur — управление состояниями фокуса для анимаций и accessibility.

Пример с обработкой клика:

<Button on:click={() => alert('Кнопка нажата')}>Нажми меня</Button>

Иконки и контент

Кнопки могут содержать иконки слева или справа. Обычно библиотеки предоставляют слот для иконки:

<Button>
  <Icon slot="start" name="check" />
  Сохранить
</Button>

Поддержка слотов позволяет добавлять сложные структуры внутри кнопки, включая текст, иконки, анимации и индикаторы состояния.

Компонент ButtonGroup

ButtonGroup объединяет несколько кнопок в единую визуальную и функциональную группу, позволяя управлять их расположением и поведением как целым.

Основные свойства ButtonGroup

  1. orientation Определяет направление кнопок:

    • horizontal — горизонтальная группа;
    • vertical — вертикальная группа.
    <ButtonGroup orientation="vertical">
  <Button>Вверх</Button>
  <Button>Вниз</Button>
</ButtonGroup>

  2. size Позволяет задавать одинаковый размер всех кнопок в группе: small, medium, large.

  3. variant Наследует стиль для всех кнопок внутри группы, если у кнопок явно не задан свой variant.

  4. spacing Определяет отступы между кнопками. Может принимать значения типа sm, md, lg или точные CSS-значения.

Особенности взаимодействия

  • Toggle-режим: группы могут работать как переключатели, где активна только одна кнопка.
  • Accessibility: правильная разметка (role="group") и управление фокусом позволяют использовать клавиатурную навигацию.

Пример toggle-группы:

<ButtonGroup>
  <Button variant={selected === 1 ? 'primary' : 'secondary'} on:click={() => selected = 1}>A</Button>
  <Button variant={selected === 2 ? 'primary' : 'secondary'} on:click={() => selected = 2}>B</Button>
</ButtonGroup>

Композиция с другими компонентами

ButtonGroup часто используется вместе с компонентами Icon и Tooltip, создавая компактные панели действий:

<ButtonGroup>
  <Button><Icon name="edit" /></Button>
  <Button><Icon name="delete" /></Button>
</ButtonGroup>

Стилизация и тема

SvelteKit UI библиотеки предоставляют возможности глубокой кастомизации:

  • CSS переменные для цветов, теней, размеров;
  • Тема: light/dark, которую можно подключать глобально;
  • Слоты и классы: позволяют вставлять кастомный контент и стили.

Пример кастомной кнопки с классом:

<Button class="my-custom-button">Текст</Button>

В сочетании с ButtonGroup это позволяет создавать сложные интерфейсные панели, поддерживая единый стиль и адаптивность.

Реактивность и интеграция с SvelteKit

  • Кнопки и группы могут реагировать на реактивные переменные Svelte, обновляя состояние интерфейса без лишнего кода.
  • Поддержка bindings и stores обеспечивает синхронизацию состояния кнопок с приложением.

Пример реактивной кнопки:

<script>
  import { writable } from 'svelte/store';
  const isLoading = writable(false);
</script>

<Button loading={$isLoading} on:click={() => isLoading.set(true)}>Загрузить</Button>

Такой подход делает интерфейсы с кнопками и их группами гибкими, масштабируемыми и полностью интегрированными в реактивную архитектуру SvelteKit.

Оглавление