Alert
Alerts display prominent messages to users relating to the page, a specific feature, or entire application.
When to use this component
Use alerts to communicate:
- Critical neutral information about system behaviour
- System errors or temporary issues
- Warning messages about potential problems
- Positive feedback after completing tasks
How to use this component
- For global messages, place alerts just below the header
- For specific messages, integrate alerts into the page content
- Use alerts sparingly to maintain their attention-grabbing nature
- Choose appropriate alert types based on the message:
- Information (blue)
- Failure (red)
- Warning (orange)
- Success (green)
- Consider different variations:
- Text only
- Text with title
- Text with link
- Text with title and link
- Use alerts for form feedback only when contextual validation isn’t possible
| Platform | Status | Release |
|---|---|---|
| Figma | Available | v.1.2.0 |
| React | Available (old theme) | v.0.11.2 |
Get in touch
If something doesn't look right, or you need more information about this component, you can contact us.
Experience Design team
Click to email. design-system@ucl.ac.uk