Alerts help draw attention to brief confirmation or warning messages—or any other important information—that shouldn't be overlooked while visitors scan the page.
When modifying alert colors, be sure to check that your colors meet a sufficient contrast ratio.
Never rely on color alone to convey meaning. Include a visual icon in alerts for those who experience colors differently.
Include an appropriate alert role for assistive technology.
Confirm and Warn
The Natura11y provides two types of alerts: Confirm implied with green, and Warn implied with red.
Every instance of an alert should include an icon to help convey meaning. Across the Framework Natura11y Icons, our open-source icon library, is used for all icons.
It holds the alert's title and visual icon.
It holds the alert's description message. It includes the unique
All links (
Inverse Color Modifier
For a bolder look, chain
--inverse to the
alert--warn modifier classes respectively.
Title Only Alert
.alert__description is not required. Leaving it out creates a title only alert.
For dismissable alerts, add the
.alert--dismissable modifier class. Doing so automatically places a close button inside the
When the close button is pressed, the alert fades out, then the entire
.alert selector is removed
from the DOM.
More Style Variations
Looking for even more alert styles? Exclude the
modifier classes. Instead, add the color utilities or border utilities for different accents and style