DRAFT DESIGN PENDING IMPLEMENTATION PENDING
The Alert component displays a short, important message in a way that attracts the user's attention. Alerts offer four severity levels that set a distinctive icon and color.
Contributors
Related Jira Tickets
https://openedx.atlassian.net/browse/PAR-150
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2008%3A885https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2008%3A918https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2008%3A951
🛠 Resources
🌳 Variants
Four severity level variants set a distinctive icon and color.
The Stacked variant is for use with:
Sidebars or small containers
Extra-small breakpoint and below
Variants | |
|---|---|
Severity levels |
|
Layout | Default, Stacked |
🌞 Best Practices
Do | Use the Stacked variant in sidebars Use the Stacked variant at the extra-small breakpoint and smaller Make all banners dismissible, unless they contain critical information or an important action that users are required to take |
Don't | Do not place an icon in the Info variant Alert banners should never grow larger than outer max-width |
♊ Related Components
📐 Specification
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2008%3A1009https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2008%3A1056
♒ Behaviors
💕 Accessibility
Focus Management Expectations |
|
Semantics |