Alert

Alerts display essential messages that require user attention or acknowledgement. They use colour, iconography, and distinct styling to communicate success, information, warnings, or errors.

Alert

There are slight styling differences between Web and React Native.

Web

Alert anatomy for web

1	Icon
2	Title (Optional)
3	Close (Optional)
4	Message
5	Button Group (Optional)

React Native

Alert anatomy for React Native

1	Icon
2	Title (Optional)
3	Close (Optional)
4	Message
5	Button Group (Optional)

Alert Slim

This is only available on the Web component library.

Alert Slim Anatomy

1	Icon
2	Message

Variants

Several variants are available.

Example of alert slim variants