Alerts
The Alert component draws the user’s attention to information crucial to interacting with the product. This is one of the few components where it is acceptable to interrupt the ordinary flow of the user’s journey.
When to use
- The user needs feedback before or after an action
- There is important information the user must review before or after moving to another section of the site, or taking an action
When not to use
- Do not use for in-depth instructions or guidance
- Do not use for information that includes links
Usage guidance
- If it is a dismisssible alert it should display at the top of the screen overlaid over other content
- All other alerts should display at the top of the content section as close to the section it relates to as possible
Alert content variations:
A simple primary alert—check it out!
Notification header
A simple primary alert with a header.Notification header
A simple primary alert with a header and an icon.
HTML
<div class="alert alert-info alert-dismissible" role="alert">
A simple primary alert—check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<h2 class="h6">Notification header</h2>
A simple primary alert with a header.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<h2 class="h6 alert-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>Notification header</h2>
A simple primary alert with a header and an icon.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 16 16">
<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>A simple primary alert with an icon.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Alert colour variations:
Warning notification
A simple primary alert with a header.Danger notification
A simple primary alert with a header.Success notification
A simple primary alert with a header.
HTML
<div class="alert alert-warning alert-dismissible" role="alert">
<h2 class="h6">Warning notification</h2>
A simple primary alert with a header.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<h2 class="h6">Danger notification</h2>
A simple primary alert with a header.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<h2 class="h6">Success notification</h2>
A simple primary alert with a header.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>