@snack-uikit/alert

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", "info"	neutral	Внешний вид
outline	boolean	-	Внешний бордер
size	enum Size: "s", "m"	m	Размер
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", "info"	neutral	Внешний вид
className	string	-	CSS-класс