FigMayo Logo

LIBRARIES

🎨 Styles Slim (0)

core

Fills & Effects
Ctrl-K
🎨 Styles/🚨 Notifications
Updated 24 August 2024
🚨 Notifications

Notifications are messages that communicate information to the user. The three variants of notifications are toast notifications, inline notifications, and actionable notifications.

toast-light

Toast messages are less disruptive than inline notifications, but be aware the user could miss them. For absolutely critical notifications, a permanent inline option is better.

Try and keep the message under 100 chars. The icon is an optional boolean property.

toast(4 variants)
View Figma
    PlaygroundFigmaLink
toast-dark

Toast messages are less disruptive than inline notifications, but be aware the user could miss them. For absolutely critical notifications, a permanent inline option is better.

Try and keep the message under 100 chars.

alert-light

Use notifications to inform users of updates or changes to system status. Communicating with users and providing immediate feedback are important for building trust. While notifications are an effective method of communicating with users, they are disruptive and should be used sparingly. See further info on copy writing guidance here.

Storybook link

Be careful to only use the error message when absolutely necessary.

alert-dark

Use notifications to inform users of updates or changes to system status. Communicating with users and providing immediate feedback are important for building trust. While notifications are an effective method of communicating with users, they are disruptive and should be used sparingly.

Be careful to only use the error message when absolutely necessary.

alert-dark(4 variants)
View Figma