diff --git a/frontend/src/app/main/ui/ds/buttons/buttons.mdx b/frontend/src/app/main/ui/ds/buttons/buttons.mdx index 3bc00dc93..ebbfa61a7 100644 --- a/frontend/src/app/main/ui/ds/buttons/buttons.mdx +++ b/frontend/src/app/main/ui/ds/buttons/buttons.mdx @@ -2,7 +2,7 @@ import { Canvas, Meta } from '@storybook/blocks'; import * as ButtonStories from "./button.stories"; import * as IconButtonStories from "./icon_button.stories"; - + # Buttons diff --git a/frontend/src/app/main/ui/ds/notifications/notifications.mdx b/frontend/src/app/main/ui/ds/notifications/notifications.mdx new file mode 100644 index 000000000..6ea282a3e --- /dev/null +++ b/frontend/src/app/main/ui/ds/notifications/notifications.mdx @@ -0,0 +1,43 @@ +import { Canvas, Meta } from '@storybook/blocks'; +import * as ToastStories from "./toast.stories"; + + + +# 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: + + + +Info: + + + +Warning: + + + +Error: + + + +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.