Figma component
Show the component in Figma
Healthy
Show details
Overview
Notification versus Alert
While the notification and alert components look similar, they serve different purposes.
- Notification appears in a timely manner to inform the user about changes in the page or application.
- Alert acts as a permanent in-page information for more critical messages that require users’ immediate attention
Key Features
- Feedback Type: Available in neutral, information, warning, success, and error styles for clear messaging.
- Dismissible: Includes an optional dismiss icon, allowing users to close alerts when needed.
- Customizable with Slots: Content can be replaced with local components using slots.
- Accessibility: Fully keyboard navigable and screen-reader accessible.
Anatomy
- Container – The structural wrapper that defines the alert’s layout, appearance, and spacing.
- Icon – Indicates the alert category and reinforces its meaning.
- Title – A brief, bold heading that summarizes the alert’s purpose.
- Message Content – The main text providing details about the alert.
- Close Button (Optional) – Allows users to dismiss the alert when needed.
Feedback Type
Alerts provide users with important feedback or status updates. They come in five types:
- Information – Provides helpful details or guidance without urgency.
- Warning – Highlights potential issues that may need attention.
- Success – Confirms that an action was completed successfully.
- Error – Indicates a problem that requires user intervention.
- Neutral – General notifications that don’t require immediate action.
Dismissible
Alerts do not dismiss automatically. They persist on the page until the user dismisses them or takes action that resolves the notification.
Look and feel
Best Practice
Do
Use alerts for high-visibility feedback such as success, error, warning, or informational messages.
Don't
Don’t rely on color alone to communicate meaning—always pair with text and icons.
Do
Match the alert style (success, error, warning, information) to the message severity.
Don't
Don’t allow users to dismiss critical alerts if the information is still needed.
Content
Communicate critical, time-sensitive information that demands users pay attention. Be concise and actionable.
Do
Incorrect data. Please review entry format.
Don't
Oh, no! Something went wrong: we couldn't process your request. Maybe try again?!
Guidelines
- State the problem clearly
- Provide actionable next steps
- Avoid emotional language or excessive punctuation
- Keep messages under 2 sentences
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.