@snack-uikit/alert NPM | npm.io

0.16.9 • Published 1 month ago

Install

Weekly downloads

-

License

Apache-2.0

Repository

Last release

1 month ago

Alert

Installation

npm i @snack-uikit/alert

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-класс

@snack-uikit/icons @snack-uikit/link @snack-uikit/loaders @snack-uikit/truncate-string @snack-uikit/utils classnames

@everything-registry/sub-chunk-847

0.16.10-preview-69fcfa33.0

1 month ago

0.15.4-preview-042f5ed6.0

7 months ago

0.15.13-preview-922d2ce6.0

5 months ago

0.15.10-preview-913f1101.0

6 months ago

0.16.1-preview-9cd1b89a.0

4 months ago

0.16.1-preview-27ae78ba.0

4 months ago

0.15.17-preview-8b563728.0

4 months ago

0.15.13-preview-f7ec3fa7.0

5 months ago

0.15.13-preview-abb5f7dc.0

4 months ago

0.15.2-preview-9a7f316b.0

8 months ago

0.16.2-preview-6a400eba.0

4 months ago

0.16.1-preview-04b740ca.0

4 months ago

0.15.13-preview-f228eb9d.0

5 months ago

0.15.8-preview-bb2cdfb8.0

6 months ago

0.15.14-preview-3566ac3d.0

4 months ago

0.15.13-preview-d479ae3f.0

4 months ago

0.16.7-preview-8cf89a18.0

3 months ago

5 months ago

0.15.4-preview-53bd8747.0

7 months ago

4 months ago

4 months ago

0.15.13-preview-e840ab81.0

5 months ago

0.15.16-preview-bc9ca5dd.0

4 months ago

5 months ago

5 months ago

0.15.4-preview-4d81b82b.0

7 months ago

0.15.13-preview-ed010264.0

5 months ago

0.16.1-preview-0d45398a.0

4 months ago

4 months ago

4 months ago

0.16.7-preview-ef227a87.0

3 months ago

0.15.4-preview-20b0f520.0

7 months ago

0.16.8-preview-cf198ddd.0

2 months ago

0.15.13-preview-20f136a2.0

5 months ago

0.15.12-preview-d9538faf.0

5 months ago

0.15.4-preview-baf754b1.0

7 months ago

7 months ago

7 months ago

7 months ago

0.15.4-preview-379c4ff3.0

7 months ago

0.16.8-preview-2f8a726b.0

2 months ago

7 months ago

6 months ago

6 months ago

0.15.8-preview-38cf19d9.0

6 months ago

0.16.10-preview-e4e8fc7b.0

1 month ago

0.16.10-preview-2df7e7b5.0

2 months ago

8 months ago

8 months ago

0.16.5-preview-790689b4.0

4 months ago

0.16.10-preview-9998cc23.0

1 month ago

0.16.10-preview-050dc1ef.0

1 month ago

0.15.13-preview-74c13173.0

4 months ago

0.15.13-preview-9ca6ecbf.0

5 months ago

0.16.6-preview-ccf49ef5.0

4 months ago

0.15.13-preview-b5e187d5.0

5 months ago

0.16.6-preview-f475624a.0

4 months ago

0.15.6-preview-95f36d41.0

7 months ago

0.16.1-preview-a0074739.0

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

2 months ago

0.15.13-preview-a2a64ca4.0

5 months ago

2 months ago

2 months ago

4 months ago

4 months ago

0.16.10-preview-aba585d4.0

1 month ago

4 months ago

0.16.8-preview-845a4e8b.0

2 months ago

0.15.4-preview-7eeb1bc1.0

7 months ago

0.13.7-preview-ba12ca94.0

9 months ago

9 months ago

9 months ago

0.13.7-preview-71543426.0

9 months ago

9 months ago

0.13.7-preview-e5174ad1.0

9 months ago

0.13.7-preview-efee0b7d.0

9 months ago

0.13.7-preview-c9b51578.0

9 months ago

0.13.7-preview-d96c83e8.0

9 months ago

0.13.7-preview-1f246c4a.0

9 months ago

0.13.7-preview-fc25f08d.0

9 months ago

0.13.7-preview-7adaddbe.0

9 months ago

0.13.7-preview-3f66d646.0

9 months ago

10 months ago

10 months ago

0.13.5-preview-e9b53c27.0

10 months ago

0.10.4-preview-d74371e8.0

1 year ago

0.11.4-preview-d4831186.0

1 year ago

0.11.5-preview-a882321d.0

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

11 months ago

1 year ago

10 months ago

1 year ago

10 months ago

12 months ago

10 months ago

0.13.4-preview-94780dcd.0

10 months ago

0.11.5-preview-b09d21bf.0

12 months ago

0.10.5-preview-0df2fefa.0

1 year ago

0.11.3-preview-767c086a.0

1 year ago

0.13.1-preview-93df0b94.0

11 months ago

0.11.3-preview-1a5a24ad.0

1 year ago

0.13.1-preview-8898cdde.0

11 months ago

0.13.3-preview-4ab4d581.0

10 months ago

0.10.4-preview-a5a79952.0

1 year ago

0.10.5-preview-c6cf83f0.0

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

0.10.6-preview-673c1a37.0

1 year ago

0.11.3-preview-a66ce7a9.0

1 year ago

0.13.3-preview-969acefa.0

10 months ago

0.13.2-preview-963c3343.0

10 months ago

1 year ago

0.10.3-preview-8bb3334c.0

1 year ago

1 year ago

1 year ago

0.10.1-preview-cb79db34.0

1 year ago

0.10.1-preview-5b75040d.0

1 year ago

0.10.1-preview-08779a44.0

1 year ago

0.10.1-preview-7a18c2ee.0

1 year ago

0.10.1-preview-69abc1d3.0

1 year ago

0.10.1-preview-80576138.0

1 year ago

0.10.1-preview-82ef7975.0

1 year ago

0.10.1-preview-0a44b2fc.0

1 year ago

0.10.1-preview-2855fb42.0

1 year ago

1 year ago

1 year ago

0.9.2-preview-ed4b1f94.0

1 year ago

1 year ago

1 year ago

0.8.8-preview-1fcf96b1.0

1 year ago

1 year ago

1 year ago

0.8.6-preview-84a92753.0

1 year ago

0.8.6-preview-2484f987.0

1 year ago

0.8.6-preview-778a0ef6.0

1 year ago

1 year ago

0.8.6-preview-3cdd8d31.0

1 year ago

0.8.5-preview-993a9cfb.0

1 year ago

1 year ago

1 year ago

0.8.2-preview-3f90b7f1.0

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

0.7.3-preview-00fa1de0.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.5.20-preview-85c5f47b.0

2 years ago