Alert
Встроенное сообщение о состоянии с заголовком и действиями.
Соберите Alert.Title, Alert.Description, Alert.Actions. Закрытие контролируется через open и onOpenChange. Помимо primary, secondary, success и danger доступен цвет warning.
Живой пример
Headline
Description
Настройки примера
Использование
import { Alert } from '@prosazhin/pbcomponents';
<Alert
color='success'
defaultOpen
>
<Alert.Title>Saved</Alert.Title>
<Alert.Description>Changes saved.</Alert.Description>
</Alert>;API компонента
Составные части: Alert.Title, Alert.Description, Alert.Actions.
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | ReactNode | Заголовок, описание и необязательные действия. | — |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning'primary · secondary · success · danger · warning | Смысловой цвет. | primary |
open | boolean | Управляемая видимость. | — |
defaultOpen | boolean | Начальная видимость без внешнего управления. | true |
onOpenChange | (open) => void | Вызывается при закрытии. | — |
closeButtonAriaLabel | string | Доступное имя кнопки закрытия. | Close alert |
Alert.Title.as | 'h1' … 'h6'h1 · h2 · h3 · h4 · h5 · h6 | Уровень заголовка Alert.Title. | h3 |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.