Alerts
Alerts are used to communicate a state that affects a system, feature or page. They are used to provide feedback about an action that has taken place.
Primary Alert
The Primary Alert description from Figma goes here
1<div class="alert alert-primary w-100 mb-0" role="alert">
2 Notification text
3</div>
Secondary Alert
The Secondary Alert description from Figma goes here
1<div class="alert alert-secondary w-100 mb-0" role="alert">
2 Notification text
3</div>Danger Alert
The Danger Alert description from Figma goes here
1<div class="alert alert-danger w-100 mb-0" role="alert">
2 Notification text
3</div>Dark Alert
The Dark Alert description from Figma goes here
1<div class="alert alert-dark w-100 mb-0" role="alert">
2 Notification text
3</div>Horizontal Alert
1<div class="alert alert-horizontal alert-dismissible w-100" role="alert">
2 <h4 class="alert-heading">Lorem Ipsum Dolor</h4>
3 <p>Notification text</p>
4 <p>
5 <a href="#">Learn more</a>
6 </p>
7 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
8</div>Info Alert
The Info Alert description from Figma goes here
1<div class="alert alert-info w-100 mb-0" role="alert">
2 Notification text
3</div>Light Alert
The Light Alert description from Figma goes here
1<div class="alert alert-light w-100 mb-0" role="alert">
2 Notification text
3</div>Success Alert
The Success Alert description from Figma goes here
1<div class="alert alert-success w-100 mb-0" role="alert">
2 Notification text
3</div>Type 9 Alert
The Type9 Alert description from Figma goes here
1<div class="alert alert-type9 w-100 mb-0" role="alert">
2 Notification text
3</div>Vertical Alert
1<div class="alert alert-vertical alert-dismissible" role="alert">
2 <h4 class="alert-heading">Lorem Ipsum Dolor</h4>
3 <p>Notification text</p>
4 <p>
5 <a href="#">Learn more</a>
6 </p>
7 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
8</div>Warning Alert
The Warning Alert description from Figma goes here
1<div class="alert alert-warning w-100 mb-0" role="alert">
2 Notification text
3</div>Accessibility
Make it clear what this alert does for the user.
-
What to do with alerts
-
What not to do with alerts
Classes
Complete list of all CSS classes for the component.
| Name | Class |
|---|---|
| Primary Alert | alert alert-primary |
| Secondary Alert | alert alert-secondary |
| Danger Alert | alert alert-danger |
| Dark Alert | alert alert-dark |
| Horizontal Alert | alert alert-horizontal |
| Info Alert | alert alert-info |
| Light Alert | alert alert-light |
| Success Alert | alert alert-success |
| Type 9 Alert | alert alert-type9 |
| Vertical Alert | alert alert-vertical |
| Warning Alert | alert alert-warning |