Элементы

Сообщение

Крупное сообщение на странице с заголовком, текстом и действием: обычное, ошибка, успех.

Примеры

<div class="alert" role="status">
  <h3 class="alert__title">Плановые работы 15/10/2026</h3>
  <p class="alert__text">С 03:00 до 03:30 по московскому времени встречи будут недоступны: обновляем сервер записи.</p>
  <div class="alert__actions"><a class="btn btn--ghost btn--sm" href="#">Подробнее</a></div>
</div>

<div class="alert alert--error" role="alert">
  <h3 class="alert__title">Не удалось подключиться к встрече</h3>
  <p class="alert__text">Сервер не отвечает уже 2 минуты. Проверьте соединение и повторите попытку.</p>
  <div class="alert__actions"><button class="btn btn--primary btn--sm" type="button">Повторить</button></div>
</div>

<div class="alert alert--success" role="status">
  <h3 class="alert__title">Запись сохранена</h3>
  <p class="alert__text">Запись встречи «Ретроспектива релиза» доступна в вашем кабинете 30 дней.</p>
</div>

Установка

bukatchuk-ui add alert

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Сообщение. Параметры: title, text, variant (error | success), action_text и action_href (необязательно).
{%- endcomment -%}
<div class="alert{% if include.variant %} alert--{{ include.variant }}{% endif %}" role="{% if include.variant == 'error' %}alert{% else %}status{% endif %}">
  {%- if include.title %}
  <h3 class="alert__title">{{ include.title }}</h3>
  {%- endif %}
  <p class="alert__text">{{ include.text }}</p>
  {%- if include.action_text %}
  <div class="alert__actions"><a class="btn btn--ghost btn--sm" href="{{ include.action_href | default: '#' }}">{{ include.action_text }}</a></div>
  {%- endif %}
</div>

Макрос для Jinja

{#- Сообщение. variant: error | success; action_text и action_href — необязательное действие. -#}
{% macro alert(text, title=None, variant=None, action_text=None, action_href='#') -%}
<div class="alert{{ ' alert--' ~ variant if variant }}" role="{{ 'alert' if variant == 'error' else 'status' }}">
  {%- if title %}
  <h3 class="alert__title">{{ title }}</h3>
  {%- endif %}
  <p class="alert__text">{{ text }}</p>
  {%- if action_text %}
  <div class="alert__actions"><a class="btn btn--ghost btn--sm" href="{{ action_href }}">{{ action_text }}</a></div>
  {%- endif %}
</div>
{%- endmacro %}