Alert

Installation

npm i @snack-uikit/alert

Changelog

Example

import { Alert, AlertTop } from '@snack-uikit/alert';
import { InfoFilledSVG } from '@snack-uikit/icons';

// Alert component displays a notification with an optional icon, title, description, and link.
// It can be used to provide information, warnings, errors, or success messages.

<Alert
  appearance='neutral'
  link={{
    text: 'Link text',
    href: 'https://cloud.ru/',
  }}
  title='Title'
  description='Title description'
  onClose={() => console.log('alert')}
/>;

// AlertTop component is similar to Alert but is positioned at the top of the screen.
// It can have an additional button with customizable text, icon, and click handler.

<AlertTop
  appearance='neutral'
  link={{
    text: 'Link text',
    href: 'https://cloud.ru/',
  }}
  closeable
  title='Title'
  description='Title description'
  action={{
    text: 'Button Text',
    icon: <PlaceholderSVG />,
    onClick: () => {},
  }}
  onClose={() => console.log('alert top')}
/>;

Alert

Компонент для отображения уведомления.

Props

| name | type | default value | description | |------|------|---------------|-------------| | description* | ReactNode | - | Описание | | icon | boolean | true | Отображать иконку | | title | string | - | Заголовок | | truncate | { title?: number; } | '{ title: 1 }' | Максимальное кол-во строк - title - в заголовке | | link | Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance"> | - | Cсылка | | onClose | () => void | - | Колбек закрытия | | appearance | enum Appearance: "neutral", "primary", "error", "warning", "success" | neutral | Внешний вид | | className | string | - | CSS-класс | | actions | { primary: Omit<AlertButtonProps, "appearance">; secondary?: Omit<AlertButtonProps, "appearance">; } | - | Кнопки в футере алерта |

AlertTop

Компонент для отображения уведомления вверху экрана.

Props

| name | type | default value | description | |------|------|---------------|-------------| | description* | ReactNode | - | Описание | | icon | boolean | true | Отображать иконку | | title | string | - | Заголовок | | truncate | { title?: number; } | '{ title: 1 }' | Максимальное кол-во строк - title - в заголовке | | link | Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance"> | - | Cсылка | | action | AlertButtonProps | - | Кнопка дополнительного действия | | onClose | () => void | - | Колбек закрытия | | appearance | enum Appearance: "neutral", "primary", "error", "warning", "success" | neutral | Внешний вид | | className | string | - | CSS-класс |