# Alert

Source: https://iriscss.com/documentation/components/alert/

A tinted message box with a colored bar on the start edge.

Add `.alert` to any block element. Give it `role="alert"` for urgent messages or `role="status"` for the rest, so screen readers announce it.

```html
<div class="alert" role="status">Your changes were saved as a draft.</div>
```

## Colors

A color class sets the bar, border, tint and text color.

```html
<div class="alert info" role="status">A new version is available.</div>
<div class="alert success" role="status">Payment received.</div>
<div class="alert warning" role="alert">Your trial ends tomorrow.</div>
<div class="alert danger" role="alert">The upload failed.</div>
```

## Headings and links

Headings and links inside an alert take its color.

```html
<div class="alert primary" role="status">
  <h4>Welcome to Iris CSS</h4>
  <p>Start with plain HTML, then <a href="/documentation/">read the docs</a> when you need a variant.</p>
</div>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-alert-padding-block` | `calc(var(--i-spacing) * 0.75)` |  |
| `--i-alert-padding-inline` | `var(--i-spacing)` |  |
| `--i-alert-accent-width` | `0.25rem` | Colored bar on the start edge |