Alert

import {Alert} from '@gravity-ui/uikit';

§Theme (тема)

normal — основная тема (используется по умолчанию).

info — используется для любой стандартной информации.

success — используется для положительной информации.

warning — используется для информации, требующей внимания.

danger — используется для критических ошибок.

utility — используется для полезных советов.

clear — подходит для использования Alert как часть других компонентов (например, в качестве content в Popover)

<Alert theme="normal" title="Normal" message="Normal theme" />
<Alert theme="info" title="Info" message="Info theme" />
<Alert theme="success" title="Success" message="Success theme" />
<Alert theme="warning" title="Warning" message="Warning theme" />
<Alert theme="danger" title="Danger" message="Danger theme" />
<Alert theme="utility" title="Utility" message="Utility theme" />
<Alert theme="clear" title="Clear" message="Clear theme" />

§View (вид)

filled — используется для настройки цвета фона алерта (используется по умолчанию).

outlined — используется для настройки цвета границ алерта.

<Alert title="Filled" message="Filled view" view="filled" />
<Alert title="Outlined" message="Outlined theme" view="outlined" />

§Layout (расположение)

vertical — используется для привлечения внимания пользователей к контенту, если задано свойство actions с кнопками. Кнопки отображаются под текстом (используется по умолчанию).

horizontal — используется для привлечения внимания пользователей к контенту, если задано свойство actions с кнопками. Кнопки отображаются справа от текста.

<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>} />
<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>} />

§Corners (углы)

rounded — включает скругленные углы окна алерта (используется по умолчанию).

square — включает прямые углы окна алерта.

<Alert title="Rounded" message="Rounded corners" corners="rounded"  />
<Alert title="Square" message="Square corners" corners="square" />

§Заголовок алерта

title — заголовок алерта. Имеет более низкий приоритет, чем у параметра Alert.Title.

<Alert title={<Alert.Title className={'some-class'} text="some text"></Alert.Title>} />

§Сообщение алерта

message — сообщение алерта. Оно должно быть достаточно информативным, чтобы полностью объяснить суть алерта.

§onClose

onClose — функция обратного вызова, которая срабатывает, когда пользователь нажимает на кнопку закрытия алерта. Если это свойство задано, кнопка закрытия видима.

<Alert onClose={() => alert('Close button pressed')} title="Alert has close" message="Alert has close" />

§Align (выравнивание)

Управляет вертикальным выравниванием содержимого внутри компонента Alert:

baseline — выравнивание по умолчанию.

center — содержимое вертикально центрируется внутри компонента Alert. Может быть полезно, если элементы управления занимают больше пространства, чем текст, или если иконка должна располагаться посередине содержимого.

<Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<Alert.Action>button</Alert.Action>} />
<Alert align="center" theme="info" title="Center" message="Center align" actions={<Alert.Action>button</Alert.Action>} align="center"/>

§Свойства