package.docs.components.alerts.mdx Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
title: Alerts
description: 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/
---
## 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 height="420px"
Wow! Everything worked!
Your account has been saved!
Did you know?
Here is something that you might like to know.
Uh oh, something went wrong
Sorry! There was a problem with your request.
I'm so sorry…
Your account has been deleted and can't be restored.
```
```html
Wow! Everything worked!
Your account has been saved!
```
## 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 code height="7rem"
This is a danger alert — check it out!
```
## 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 height="420px"
```
```html
```
## Alerts with icons
Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
```html example height="420px"
Wow! Everything worked!
Your account has been saved!
Did you know?
Here is something that you might like to know.
Uh oh, something went wrong
Sorry! There was a problem with your request.
I'm so sorry…
Your account has been deleted and can't be restored.
```
```html
Wow! Everything worked!
Your account has been saved!
Did you know?
Here is something that you might like to know.
Uh oh, something went wrong
Sorry! There was a problem with your request.
I'm so sorry…
Your account has been deleted and can't be restored.
```
## Alert with avatar
Add an avatar to your alert modal to make it more personalized.
```html code example height="420px"
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
JL
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
## 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 code example height="500px" scrollable
Some Title
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
Some Title
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
Some Title
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
```
## Important alerts
If you want your alert to be really eye-catching, you can add a class `alert-important`.
```html example vertical height="210px"
```
```html
```