- Container (Height: 56px; Radius: 2px; background-color: white; 1px border, 8px indicator line same color as border on the left; Padding: 16px; Margin: 16px) required
- Alert text (Font: Open Sans Bold 14px) required
- Leading Non-Interactive Icon/ Charm (16x16px) optional
- Button (text only, right aligned) or trailing close icon (16px16px) optional
- Link (underlined, only one per alert) optional
You have completed a task.
- Appear on top of the main content container.
- Stretch horizontally to fill 100% of the container they are placed in.
- Always follow typography line length guidelines when displaying alerts. Pair with another component, like a Form, or place in a fixed-width container to ensure alerts don’t get too wide.
- Push other content down to make room for an alert on a page.
- Can include tint to add extra emphasis or to increase contrast with page content. When changing background color, make sure the text and icons pass contrast ratio requirements.
- Do not have a shadow.
- Remain on the page until dismissed.
A basic Primary alert
A basic secondary alert with a buttonButton
A basic dark alert with text formatting
Success! A basic success alert with a dismiss icon
Error! A basic error alert with a dismiss icon
Warning! A basic warning alert with a dismiss icon
- When applicable, dismiss by clicking the close icon.
- When dismissed or resolved, alerts slide up and fade out, relinquishing their space.
- Keep titles three to five words if possible.
- For titles, use title case and capitalize prepositions of four letters or more.
- Messages should tell the user what’s happening and whether they need to act to successfully keep moving through a task. Warning alerts might tell a user what could happen if they don’t address what they’re being warned about.
- For messages, use full sentences with punctuation. Use sentence case.
- Unordered lists offer a structured format to present:
- Items needing resolution
- Guidelines to successful completion
- Ways to resolve problems
Was this page helpful?
Thanks for your feedback!