Status

Component checklist

Key Points

• There are four styles of alert: information, warning, danger and success
• Alert has different styling between Web and React Native, but all other guidelines are consistent
• Each alert has a default icon
• Keep alert messages concise, but they can wrap over multiple lines
• Follow the content guidelines for written copy
• Buttons should be used for actions; do not use links
• Alert has the option to include a dismissible button or up to two call to action (CTA) buttons

Alerts Slim

Slim alerts currently appear in the Web library only.

Use a slim alert when it's nested within other content. Slim alerts are a lighter-weight version of the main alert component.

Styles

Styles are the same as the main alerts component. Use them in the same manner.

Slim alert styling removes borders to create a more subtle appearance when nested. If the text is longer than the containing space, it wraps onto a new line.

Example

This example illustrates an alert slim component used within a form.

 

File Links