UCLA Component Library
Alerts
In Progress
Notify users of an important change or new piece of information
Usage
Usability Guidance
Use alerts to validate steps taken by users or denote a system change.
Use alerts sparingly. Show one at a time to avoid overwhelming users.
Be polite and encouraging, and inform users how to respond to or fix a problem.
Accessibility Requirements
Design alerts to visually contrast with surrounding content.
Use a high-contrast outline or background color and an icon for high visibility.
Use the ARIA
role="alert"
to notify assistive technology of time-sensitive information.
Further Reading
Using the alert role
Primary Alert
Anatomy
Alert Copy (required)
Container (required)
Specs
Code
Secondary Alert
Anatomy
Alert Copy (required)
Container (required)
Specs
Code
Success Alert
Anatomy
Alert Copy (required)
Success Icon (required)
Container (required)
Specs
Code
Error Alert
Anatomy
Alert Copy (required)
Error Icon (required)
Container (required)
Specs
Code
Warning Alert
Anatomy
Alert Copy (required)
Warning Icon (required)
Container (required)
Specs
Code
documentation
Overview
Installation
Download
Contribute
Contributing
Colors
Overview
Layout
Text
Interactive Light
Interactive Dark
Denotive
Typography
Overview
Headings
Lead Copy
Body Copy
Body Copy Small
Code
Other Text Styles
Links
Icons
Icons
Layout
Grid
Spacing
Component Guidelines
Documentation Templates
Component Documentation Template 1
Component Documentation Template 2
Accordion
Alerts
Banners
Buttons And Links
Cards
Factoids Rankings And Statistics
Footer
Forms
Lists
Navigation
Ribbons
Social
Tables
Tabs
Tiles
Utilities
Breakpoints
Visually Hidden
components
Grid
Spacing
Typography
Icons
Denotive Icons
Denotive Image
Denotive Svg
Social Icons
Social Image
Social Svg
Weather Icons
Weather Image
Weather Svg
Button And Links
Button
Default
Primary
Secondary
Tertiary
Group
Pagination
Links
Cards
Default
Basic
Event
Featured Story
Story
Person
Factoids Rankings And Statistics
Statistics
Forms
Default
Checkbox
Fieldset Legend
Radio
Select Menu
Text
Lists
Ribbons
Default
Brand
Highlight
Social
Default
Links
Post Tiles
Table
Default
Right
Sort