НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Сообщение в разделе

Сообщение в разделе говорит пользователю что-то об одной части страницы. Оно стоит среди содержимого и остаётся, пока проблему не решат или сообщение не закроют.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Heads up Two-factor authentication will be required for all admins next month. 
<tk-section-message>
  <span slot="title">Heads up</span>
  Two-factor authentication will be required for all admins next month.
</tk-section-message>

Анатомия

Часть Что это
tk-section-message сам элемент; тонированный блок со скруглёнными углами (part message)
слот и part icon иконка смысла в начале; декоративная
слот и part title заголовок, по желанию; настоящий заголовок или <span>
слот по умолчанию (part body) само сообщение: одно-два коротких предложения, обязательно
слот и part actions действия под сообщением, по желанию
кнопка закрытия ✕, только с dismissible

Варианты

New members get access in about an hour. Drafts are saved for 30 days. Your calendar is connected. Vacation mode is on. You won't get alerts. We couldn't save your changes. Try again.
<tk-section-message>New members get access in about an hour.</tk-section-message>
<tk-section-message tone="neutral">Drafts are saved for 30 days.</tk-section-message>
<tk-section-message tone="success">Your calendar is connected.</tk-section-message>
<tk-section-message tone="warning">Vacation mode is on. You won't get alerts.</tk-section-message>
<tk-section-message tone="error">We couldn't save your changes. Try again.</tk-section-message>
  • info (по умолчанию): сведения или совет.
  • neutral: тихая заметка, не очень важная.
  • success: действие выполнено.
  • warning: предупреждение до или во время действия.
  • error: действие не удалось или что-то нужно исправить.

У каждого тона своя форма иконки: треугольник у warning, круг у остальных. Назовите смысл и в тексте: одного цвета мало, его видят не все. В контрастной теме у блока появляется ещё рамка 1px.

Иконка

Prices include VAT. Saved to your reading list. 
<tk-section-message hide-icon>Prices include VAT.</tk-section-message>
<tk-section-message tone="success">
  <tk-icon slot="icon" name="bookmark"></tk-icon>
  Saved to your reading list.
</tk-section-message>
  • hide-icon убирает иконку.
  • tk-icon в slot="icon" заменяет её. Она так же скрыта от скринридеров, как и иконка по умолчанию.

Действия

Turn on notifications You won't get alerts until notifications are enabled for this browser. Enable Not now 
<tk-section-message tone="warning">
  <span slot="title">Turn on notifications</span>
  You won't get alerts until notifications are enabled for this browser.
  <tk-button slot="actions" size="small">Enable</tk-button>
  <tk-link slot="actions" treatment="quiet" href="/settings">Not now</tk-link>
</tk-section-message>
  • В slot="actions" кладите tk-button вида secondary или ghost или тихую tk-link. Не берите outline: на тоне neutral его рамки не видно.
  • Не больше одного главного и одного второстепенного действия. Если нужно больше, берите диалог или отдельную страницу.

Закрытие

Upload failed The file is larger than 25 MB. 
<tk-section-message tone="error" dismissible>
  <span slot="title">Upload failed</span>
  The file is larger than 25 MB.
</tk-section-message>

dismissible добавляет ✕ с именем из dismiss-label. Нажатие запускает отменяемое событие tk-dismiss, и сообщение прячется само, если вы не вызвали preventDefault().

  • Не давайте закрыть сообщение, если пользователь обязан решить проблему. Сообщение о неудавшемся действии закрываемым быть может.
  • ✕ исчезает вместе с сообщением, поэтому после закрытия переведите фокус в разумное место.