--- 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. Combine `alert` class with one of the following: `alert-success`, `alert-info`, `alert-warning`, `alert-danger` to get the alert that you need. Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content. {% capture html -%} {% include "ui/alert.html" type="success" title="Wow! Everything worked!" description="Your account has been saved!" %} {% include "ui/alert.html" type="info" title="Did you know?" description="Here is something that you might like to know." %} {% include "ui/alert.html" type="warning" title="Uh oh, something went wrong" description="Sorry! There was a problem with your request." %} {% include "ui/alert.html" type="danger" title="I'm so sorry…" description="Your account has been deleted and can't be restored." %} {%- endcapture %} {% include "docs/example.html" html=html %} ## 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. Use `alert-link` class to style the link and match the text color. {% capture html -%} {% include "ui/alert.html" type="danger" title="This is a danger alert" link="check it out" %} {%- endcapture %} {% include "docs/example.html" html=html %} ## Dismissible alerts Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only when the user closes it. ```html ``` {% capture html -%} {% include "ui/alert.html" type="danger" title="This is a danger alert" show-close %} {%- endcapture %} {% include "docs/example.html" html=html %} ## Alerts with icons Add an icon to your alert modal to make it more user-friendly and help users easily identify the message. Use the `alert-icon` class on an `` (or on an `` when using the webfont) to provide the proper styling. {% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %} ## Alert with avatar Add an avatar to your alert modal to make it more personalized. {% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %} ## 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. Buttons don't inherit the alert's color, so you should set the proper class if you want it to be matched. For example, `btn-success` for `alert-success`. {% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %} ## Important alerts If you want your alert to be really eye-catching, you can add an `alert-important` class. It will use the selected color as a background for the alert. ```html ``` You can also use other elements, like icons and dismissible buttons, with this type of alert. {% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %} ## Custom alert color You're not limited to the 4 default alert colors. You can use any [base or social color](../base/colors) you want. {% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %} ## SASS variables You can customize the alert colors by changing the SASS variables. The default values are: {% scss-docs "alert-variables" "ui/_alerts.scss" %}