The Alert Component should be used to display important messages, notifications, or warnings to users. It is designed to grab users attention and provide them with relevant information that requires immediate action or acknowledgment.
Should support different types of alerts and come in different status-colors: success, danger, warning, info. It should not be possible to customize the color and style.
Should use status icons from Navs icon library: InformationSquare , CheckmarkCircle , X-markOctagon , ExclamationmarkTriangle. It should not provide an option to change the icons or add other images.
Should come in one size.
Should be able to display a title or heading for the alert message. If there is no title, the paragraph should appear next to the icon.
Should (of course) follow accessibility standards, including proper semantic markup, correct use of ARIA attributes and keyboard accessibility. It should provide text alternatives for the icons.
We could consider to support dismissible alerts later, allowing users to close or dismiss the alert if desired, but that is not included in the first version. (The X is removed from sketches until further)
We could consider to have a brand-variant that provides theming for custom colors and icon. (Or use the info-variant for this)
Related information and insight
Alert specification
The Alert Component should be used to display important messages, notifications, or warnings to users. It is designed to grab users attention and provide them with relevant information that requires immediate action or acknowledgment.
Should support different types of alerts and come in different status-colors:
success
,danger
,warning
,info
. It should not be possible to customize the color and style.Should use status icons from Navs icon library:
InformationSquare
,CheckmarkCircle
,X-markOctagon
,ExclamationmarkTriangle
. It should not provide an option to change the icons or add other images.Should come in one size.
Should be able to display a title or heading for the alert message. If there is no title, the paragraph should appear next to the icon.
Should (of course) follow accessibility standards, including proper semantic markup, correct use of ARIA attributes and keyboard accessibility. It should provide text alternatives for the icons.
Should support different languages.
Should not support rich text.
Figma design
For later: