NotificationActionButton

NotificationActionButton — это специализированный компонент библиотеки Carbon Components Svelte, предназначенный для создания кнопок действий внутри уведомлений (notifications). Он позволяет добавлять интерактивные элементы к уведомлениям, такие как ссылки, кнопки подтверждения или отмены, обеспечивая пользователю быстрый доступ к действиям без необходимости перехода на другие части интерфейса.

Основная структура компонента

<NotificationActionButton
  kind="ghost"
  disabled={false}
  on:click={handleClick}
>
  Действие
</NotificationActionButton>

  • kind – определяет визуальный стиль кнопки. Доступные значения:

    • ghost — прозрачная кнопка с рамкой.
    • primary — основной акцент на действии.
    • secondary — второстепенное действие.

  • disabled – логическое значение, указывающее, доступна ли кнопка для взаимодействия.

  • on:click – событие клика, позволяющее привязать обработчик действий.

Работа с событиями

Компонент поддерживает стандартные DOM-события, но наиболее часто используется событие click. Оно может быть обработано с использованием функций Svelte:

<script>
  function handleClick(event) {
    console.log("Кнопка действия нажата", event);
    // Здесь можно реализовать логику закрытия уведомления
  }
</script>

<NotificationActionButton on:click={handleClick}>
  Подтвердить
</NotificationActionButton>

Особенность компонента в том, что его клик часто используется совместно с уведомлениями типа inline или toast, поэтому обработка должна учитывать контекст уведомления.

Интеграция с Notification

Компонент NotificationActionButton предназначен для использования внутри компонента Notification. Пример типового использования:

<Notification
  kind="info"
  title="Информация"
  subtitle="Это уведомление содержит кнопку действия"
  on:close={handleClose}
>
  <NotificationActionButton on:click={handleActionClick}>
    Выполнить
  </NotificationActionButton>
</Notification>
  • Notification — основной контейнер уведомления.
  • title и subtitle — заголовок и подзаголовок уведомления.
  • on:close — событие закрытия уведомления.
  • NotificationActionButton располагается внутри уведомления и визуально отделяется от текста кнопкой.

Настройка стилей и адаптация к теме

Компонент унаследует общие стили Carbon и корректно интегрируется с темами (light/dark). Для точной настройки можно использовать следующие параметры:

  • kind — влияет на цветовую палитру и рамки.
  • CSS-переменные Carbon — позволяют переопределять размеры, цвета, отступы. Например:
:global(.bx--btn--ghost) {
  border-radius: 6px;
  padding: 0.5rem 1rem;
}
  • Использование классов Carbon (bx--btn, bx--btn--primary, bx--btn--ghost) позволяет тонко настраивать внешний вид без ломки адаптивной структуры.

Комбинирование нескольких действий

Для уведомлений с множественными действиями можно добавлять несколько NotificationActionButton:

<Notification kind="warning" title="Предупреждение">
  <NotificationActionButton on:click={accept}>Принять</NotificationActionButton>
  <NotificationActionButton kind="secondary" on:click={decline}>Отклонить</NotificationActionButton>
</Notification>
  • Primary/Secondary — помогает визуально разграничить действия по приоритету.
  • Accessibility — Carbon автоматически добавляет правильные роли и атрибуты для кнопок, что улучшает доступность интерфейса.

Accessibility и семантика

NotificationActionButton корректно работает с клавиатурной навигацией и поддерживает:

  • Фокусировку с помощью клавиши Tab.
  • Нажатие через клавишу Enter или Space.
  • ARIA-атрибуты для описания действия в контексте уведомления.

Это делает компонент полностью готовым к использованию в интерфейсах с высокими требованиями к доступности.

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

  1. Минимизировать количество кнопок в уведомлении — слишком много действий перегружает интерфейс.
  2. Использовать kind="primary" для главного действия — помогает пользователю быстро определить важное действие.
  3. Обрабатывать click внутри Notification — чтобы уведомление могло закрыться автоматически после действия.
  4. Тестировать на разных размерах уведомлений — inline и toast уведомления могут иметь разное поведение.

Взаимодействие с toast-уведомлениями

Для toast-уведомлений, которые появляются и исчезают автоматически, рекомендуется использовать кнопки с краткими подписями и минимальной задержкой для реакции пользователя:

<Notification kind="success" title="Сохранено" subtitle="Данные успешно сохранены" timeout={5000}>
  <NotificationActionButton on:click={undo}>Отменить</NotificationActionButton>
</Notification>
  • timeout — время, через которое уведомление автоматически исчезает.
  • Кнопка undo позволяет отменить действие без перехода на другую страницу.

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

Оглавление