Alerts

🧭 When to Use an Alert

Use an Alert when:

• You need to communicate system feedback (e.g., success, error, warning)

• A process completes, fails, or needs attention

• You want to reinforce actions like “Profile saved” or “Something went wrong”

Avoid Alerts when:

• The message is not time-sensitive or doesn’t require user awareness — use Helper Text or Tooltips

• You need to display multi-step error resolution — consider using a Modal

🎨 Visual Styles

• Default – A filled alert with background and border

• Outline – A bordered alert with no background fill

• No Border – A minimal version with only icon and text (used in very lightweight UIs)

Use styles to match the alert's visual prominence within your layout. For example: use default for primary feedback, and no border for gentle nudges.

🚦 Statuses

The alert's status determines its color and tone:

• Default – Neutral tone for general messages

• Secondary – Soft tone for info that doesn’t require action

• Warning – For cautionary messages that don’t block progress

• Error – Indicates something has gone wrong

• Success – Confirms a successful action or resolution

• Information – Provides non-critical guidance or context

Each status uses semantic color tokens and supports both light and dark modes.

🧩 Types

• Default – Standard filled or bordered version

• Transparent – Background-free, text-first version. Best for lightweight UIs or non-blocking messages

These can be toggled via variants in Figma.

📐 Optional Content (Layer Properties)

The Alert supports toggleable elements that you can enable or hide via layer properties in Figma:

• Subheadline – A secondary line of text that adds extra context or description

• Actions – Includes buttons or links (e.g., “Undo”, “Retry”, “Review”)

• Closeable – Adds a close icon or button in the top right corner

You can mix and match these elements depending on the alert’s purpose. Keep alerts as short and scannable as possible, especially with actions.

♿ Accessibility Considerations

From a design perspective:

• Ensure the alert is visible and clearly differentiated from surrounding content

• Don’t rely on color alone to convey urgency — pair it with icons and/or headings

• Use spacing and hierarchy to balance subheadline and actions

From a code perspective (if implemented):

• Use role="alert" for errors and important real-time messages

• Use aria-live="polite" or assertive" based on urgency

• If closable, ensure the close icon has aria-label="Close alert"

✅ Best Practices

• Use icons to reinforce meaning, especially in low-contrast or compact UIs

• Limit the use of closeable alerts — reserve them for dismissible, non-blocking messages

• Place actions like “Retry” or “Undo” in context — keep it brief

• Avoid stacking multiple alerts on the same screen

• Use status and visual style together to match message tone and urgency