# Alert > Alerts report the result of an action or a problem to fix, in success, info, warning and danger variants, with icons, links and a dismiss button. Show alert messages that inform users about success, info, warning, or danger states, with icons, links, and dismissible options. Source: https://docs.tabler.io/ui/components/alert --- ## Default markup An alert comes in four types: success, info, warning and danger. Pick the one that matches the message, so the color says at a glance whether something went right or wrong. 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. ```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. ```html ``` Use `alert-action` instead when the link is the thing to do next rather than a word inside a sentence. It is underlined on its own line and drops the underline on hover. ```html ``` ## Alert with a list Wrap several messages in a `ul` with the `alert-list` class. It removes the default list margin so the items sit flush inside the alert. ```html ``` ## Minor alerts Add `alert-minor` for a quieter alert. It drops the tinted background and keeps a plain border, so the color only shows in the icon and the heading. Use it where an alert would otherwise dominate the page. ```html ``` ## Dismissible alerts Add a close button to let the user dismiss the alert. It stays on the page until they do. ```html ``` ```html ``` ## Alerts with icons An icon in front of the text repeats the type of the alert, which helps when several alerts are on the page. Use the `alert-icon` class on an `` (or on an `` when using the webfont) to provide the proper styling. ```html ``` ## Alert with avatar Put an [avatar](/ui/components/avatar) in the alert when the message is about a person, such as a mention or a request. ```html ``` ## Alert with buttons Add [buttons](/ui/components/button) when the alert asks the user to do something, for example to confirm or to retry. 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`. ```html ``` ## Important alerts Add `alert-important` to fill the whole alert with its color. Use it for messages that must not be missed. ```html ``` You can also use other elements, like icons and dismissible buttons, with this type of alert. ```html ``` Links work here too. Both `alert-link` and `alert-action` follow the alert color, so they turn white on the solid background. ```html ``` ## Custom alert color You're not limited to the 4 default alert colors. You can use any [base color](/ui/base/colors) you want. ```html ``` ## Accessibility - Give an alert a role that matches how urgent it is. `role="alert"` interrupts the screen reader and suits an error; `role="status"` waits for a pause and suits a confirmation. - The live region has to exist before the message arrives. Render the container on page load and put the text into it, rather than inserting the whole alert at the moment of the event. - Label the dismiss button with `aria-label="Close"`. `btn-close` has no text of its own. - The icon is decoration, so the alert must still read correctly with the icon ignored. Keep the meaning in the heading and the text. - Colour alone does not say "error". A red alert and a green one must differ in their words too. - After dismissing an alert, move focus somewhere sensible. Focus left on a removed element falls back to the top of the page. ## SCSS variables Use these SCSS variables to customize alerts. The default values are: ```scss $alert-padding-y: 0.75rem; $alert-padding-x: 1rem; $alert-margin-bottom: 1rem; $alert-link-font-weight: var(--font-weight-semibold); $alert-border-width: var(--border-width); $alert-border-color: var(--border-color-translucent); $alert-shadow: rgba($dark, 0.04) 0 2px 4px 0; $alert-heading-margin-bottom: 0.25rem; $alert-icon-size: 1.25rem; $alert-padding-inline-end: 3rem; $alert-gap: 1rem; ``` _Source: `core/scss/_variables.scss`_