@tabler/core
Version:
Premium and Open Source dashboard template with responsive and high quality UI.
356 lines (325 loc) • 14.4 kB
text/mdx
---
title: Alerts
summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
bootstrapLink: components/alerts/
description: Alert messages for user notifications.
---
## Default markup
Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
```html example vertical background="surface" columns={2} centered separated
<div class="alert alert-success" role="alert">
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
<div class="alert alert-info" role="alert">
<h4 class="alert-title">Did you know?</h4>
<div class="text-secondary">Here is something that you might like to know.</div>
</div>
<div class="alert alert-warning" role="alert">
<h4 class="alert-title">Uh oh, something went wrong</h4>
<div class="text-secondary">Sorry! There was a problem with your request.</div>
</div>
<div class="alert alert-danger" role="alert">
<h4 class="alert-title">I'm so sorry…</h4>
<div class="text-secondary">Your account has been deleted and can't be restored.</div>
</div>
```
```html
<div class="alert alert-success" role="alert">
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
```
## Alert links
Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
```html example vertical background="surface" columns={2} centered
<div class="alert alert-danger m-0">
This is a danger alert — <a href="#" class="alert-link">check it out</a>!
</div>
```
## Dismissible alerts
Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
```html example vertical background="surface" columns={2} centered separated
<div class="alert alert-success alert-dismissible" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg>
</div>
<div>
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12.01" y2="8" />
<polyline points="11 12 12 12 12 16 13 16" />
</svg>
</div>
<div>
<h4 class="alert-title">Did you know?</h4>
<div class="text-secondary">Here is something that you might like to know.</div>
</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 9v2m0 4v.01" />
<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
</svg>
</div>
<div>
<h4 class="alert-title">Uh oh, something went wrong</h4>
<div class="text-secondary">Sorry! There was a problem with your request.</div>
</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</div>
<div>
<h4 class="alert-title">I'm so sorry…</h4>
<div class="text-secondary">Your account has been deleted and can't be restored.</div>
</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
```
```html
<div class="alert alert-success alert-dismissible" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler.io/icons/icon/check -->
<svg>...</svg>
</div>
<div>
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
```
## Alerts with icons
Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
```html
<div class="alert alert-success" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler.io/icons/icon/check -->
<svg>...</svg>
</div>
<div>
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
</div>
</div>
```
To see how the icon affects the alert modal, look at the example below.
```html example vertical background="surface" columns={2} centered separated
<div class="alert alert-success" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg>
</div>
<div>
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12.01" y2="8" />
<polyline points="11 12 12 12 12 16 13 16" />
</svg>
</div>
<div>
<h4 class="alert-title">Did you know?</h4>
<div class="text-secondary">Here is something that you might like to know.</div>
</div>
</div>
</div>
<div class="alert alert-warning" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 9v2m0 4v.01" />
<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
</svg>
</div>
<div>
<h4 class="alert-title">Uh oh, something went wrong</h4>
<div class="text-secondary">Sorry! There was a problem with your request.</div>
</div>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</div>
<div>
<h4 class="alert-title">I'm so sorry…</h4>
<div class="text-secondary">Your account has been deleted and can't be restored.</div>
</div>
</div>
</div>
```
## Alert with avatar
Add an avatar to your alert modal to make it more personalized.
```html example vertical background="surface" columns={2} centered separated
<div class="alert alert-success" role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3" style="background-image: url(/static/samples/avatars/039m.jpg)"></span>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3">JL</span>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>
<div class="alert alert-warning" role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="d-flex">
<div>
<span class="avatar me-3" style="background-image: url(/static/samples/avatars/056f.jpg)"></span>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>
```
## Alert with buttons
Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
```html example vertical background="surface" columns={2} centered separated
<div class="alert alert-success alert-dismissible" role="alert">
<h3 class="mb-1">Some Title</h3>
<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
<div class="btn-list">
<a href="#" class="btn btn-success">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<h3 class="mb-1">Some Title</h3>
<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
<div class="btn-list">
<a href="#" class="btn btn-info">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<h3 class="mb-1">Some Title</h3>
<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
<div class="btn-list">
<a href="#" class="btn btn-warning">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<h3 class="mb-1">Some Title</h3>
<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
<div class="btn-list">
<a href="#" class="btn btn-danger">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
```
## Important alerts
If you want your alert to be really eye-catching, you can add a class `alert-important`.
```html
<div class="alert alert-important alert-success alert-dismissible" role="alert">
...
</div>
```
Look at the example below to see how the important alert affects the alert modal.
```html example vertical background="surface" columns={2} centered separated
<div class="alert alert-important alert-success alert-dismissible" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l5 5l10 -10"></path>
</svg>
</div>
<div>
Wow! Everything worked!
</div>
</div>
<a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-important alert-danger alert-dismissible" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
</div>
<div>Your account has been deleted and can't be restored.</div>
</div>
<a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
</div>
```