mirror of
https://github.com/penpot/penpot.git
synced 2026-08-31 17:19:11 +00:00
44 lines
919 B
Plaintext
44 lines
919 B
Plaintext
import { Canvas, Meta } from '@storybook/blocks';
|
|
import * as ToastStories from "./toast.stories";
|
|
|
|
<Meta title="Notifications/Docs" />
|
|
|
|
# Notifications
|
|
|
|
`toast*` and `context-notification` accept a `level` prop to indicate the type of message. If this prop is `nil`,
|
|
the default variant will be shown:
|
|
|
|
<Canvas of={ToastStories.Default} />
|
|
|
|
Info:
|
|
|
|
<Canvas of={ToastStories.Info} />
|
|
|
|
Warning:
|
|
|
|
<Canvas of={ToastStories.Warning} />
|
|
|
|
Error:
|
|
|
|
<Canvas of={ToastStories.Error} />
|
|
|
|
Success:
|
|
|
|
<Canvas of={ToastStories.Success} />
|
|
|
|
## Toasts
|
|
|
|
Toast notifications are temporary floating elements that provide information
|
|
that requires user acknowledgement.
|
|
|
|
### Usage guidelines (design)
|
|
|
|
#### Where to use
|
|
|
|
Displayed in the top right corner of the page, in absolute position.
|
|
|
|
#### When to use
|
|
|
|
When the notification is temporary and is related or affects the whole context
|
|
of the page the user is viewing or interacting with.
|