System status
Lab componentSystem status
System status communicates essential platform-wide information or alerts, such as system maintenance or outages. These messages are designed to be quickly noticed and prompt users to take action if needed. System status offers 4 severity levels, each with a dedicated icon and color; info
, success
, warning
and error
.
Use the info system status to communicate important updates or new features that do not require immediate action.
Use error system status for critical issues that affect the user's ability to access or use the platform. When relevant, add a secondary action to help resolve the issue.
Warnings announce scheduled outages or events that might impact the product experience, but don't prevent the user from using the application or completing their current workflow.
Use warning system status to alert users about potential issues.
Use success system status to communicate successfully completed system actions.
Use a title in a system status to highlight important information, and use description text to provide supporting details.
System status alerts are displayed at the very top of the screen, extending across the full width of the page.
They are positioned at the same level as the main content, causing any subsequent content to shift accordingly. For example, when a system status is dismissed, the content below it would move up to its original position.
Use the info system status to communicate important updates or new features that do not require immediate action.
Use error system status for critical issues that affect the user's ability to access or use the platform. When relevant, add a secondary action to help resolve the issue.
Warnings announce scheduled outages or events that might impact the product experience, but don't prevent the user from using the application or completing their current workflow.
Use warning system status to alert users about potential issues.
Use success system status to communicate successfully completed system actions.
Use a title in a system status to highlight important information, and use description text to provide supporting details.
System status alerts are displayed at the very top of the screen, extending across the full width of the page.
They are positioned at the same level as the main content, causing any subsequent content to shift accordingly. For example, when a system status is dismissed, the content below it would move up to its original position.
Use the info system status to communicate important updates or new features that do not require immediate action.
Use error system status for critical issues that affect the user's ability to access or use the platform. When relevant, add a secondary action to help resolve the issue.
Warnings announce scheduled outages or events that might impact the product experience, but don't prevent the user from using the application or completing their current workflow.
Use warning system status to alert users about potential issues.
Use success system status to communicate successfully completed system actions.
Use a title in a system status to highlight important information, and use description text to provide supporting details.
System status alerts are displayed at the very top of the screen, extending across the full width of the page.
They are positioned at the same level as the main content, causing any subsequent content to shift accordingly. For example, when a system status is dismissed, the content below it would move up to its original position.