Button и его варианты

Button — это основной элемент управления, предназначенный для выполнения действий пользователя. В библиотеке Carbon Components Svelte он реализован с полной поддержкой стилей, состояний и событий, обеспечивая гибкую интеграцию в приложения на Svelte.

Импорт и базовое использование

Для использования кнопки необходимо импортировать компонент из библиотеки:

<script>
  import { Button } from "carbon-components-svelte";
</script>

<Button>Нажми меня</Button>

Базовая кнопка отображается с дефолтным стилем Carbon и поддерживает стандартные HTML-события, такие как on:click.

Типы кнопок

Button поддерживает несколько типов, каждый из которых предназначен для различных сценариев:

  1. Primary Button

    • Используется для основного действия на странице.
    • Атрибут kind="primary" задает основной стиль.
    <Button kind="primary">Сохранить</Button>

  2. Secondary Button

    • Для второстепенных действий, менее акцентированных.
    • Атрибут kind="secondary":
    <Button kind="secondary">Отмена</Button>

  3. Tertiary Button

    • Применяется для действий, которые не являются ключевыми.
    • Атрибут kind="tertiary":
    <Button kind="tertiary">Подробнее</Button>

  4. Danger Button

    • Используется для действий, которые могут иметь критические последствия, например удаление.
    • Атрибут kind="danger":
    <Button kind="danger">Удалить</Button>

Размеры кнопок

Компонент поддерживает изменение размеров через атрибут size:

  • Small

    <Button size="sm">Маленькая кнопка</Button>

  • Medium (значение по умолчанию)

    <Button size="md">Средняя кнопка</Button>

  • Large

    <Button size="lg">Большая кнопка</Button>

Размер влияет на высоту, отступы и размер текста кнопки.

Состояния кнопок

Button поддерживает несколько визуальных состояний:

  • Disabled — заблокированное состояние:

    <Button disabled>Недоступно</Button>

    Заблокированная кнопка не реагирует на клики и меняет визуальный стиль.

  • Loading — индикатор загрузки:

    <Button loading>Загрузка...</Button>

    Показывает спиннер и делает кнопку неактивной до завершения процесса.

  • Skeleton — скелетон для предварительной загрузки:

    <Button skeleton>Загрузка</Button>

Иконки и кнопки с иконками

Button позволяет интегрировать иконки для улучшения визуальной навигации:

<Button>
  <Icon name="add" slot="icon" />
  Добавить элемент
</Button>
  • Атрибут slot="icon" размещает иконку перед текстом.
  • Возможна комбинация с типами кнопок и состояниями.

События

Основное событие, используемое с Button, — click:

<Button on:click={() => console.log("Кнопка нажата")}>
  Кликни меня
</Button>

Поддерживаются все стандартные события DOM, включая focus, blur, mouseenter и mouseleave.

Адаптивность и доступность

  • Keyboard navigation — кнопки полностью управляются с клавиатуры.
  • ARIA атрибуты — поддерживаются aria-label, aria-disabled и другие для улучшенной доступности.
  • Focus styles — визуальные индикаторы фокуса встроены для всех состояний.

Комбинация атрибутов

Button можно комбинировать по типу, размеру, состоянию и наличию иконки:

<Button kind="danger" size="lg" loading>
  Удаление...
</Button>

В этом примере кнопка отображается большой, красной, с индикатором загрузки и неактивна до завершения процесса.

Практические рекомендации

  • Для основного действия всегда использовать kind="primary".
  • Второстепенные действия лучше выделять secondary или tertiary стилями.
  • Использовать loading при асинхронных действиях, чтобы предотвратить повторные клики.
  • Добавление иконок помогает повысить визуальную информативность кнопки без перегрузки интерфейса текстом.

Button в Carbon Components Svelte — это гибкий инструмент для создания интерактивных элементов интерфейса, сочетающий универсальность, доступность и соответствие дизайну Carbon.

Оглавление