# Inline alert

Status: stable

A message about the whole page or a section: information, success, a warning or an error.

Alerts tell managers about something on the whole screen or a section: a save worked, something needs checking, or something went wrong. They sit at the top of the area they are about.

## Example

```html
<div class="at-alert at-alert--success" role="status"><strong class="at-alert__title">Settings saved</strong>Reminders will go out at 9am.</div>
```

## Anatomy

1. **Edge**: border-left: 4px solid (status colour)

2. **Title**: font-weight: var(--at-weight-bold); display: block

3. **Message**: font-size: var(--at-text-sm); background: status -bg token; padding: var(--at-space-4) var(--at-space-5)

## Variants

### Information

Neutral news: something is syncing, a change is coming.

```html
<div class="at-alert at-alert--info" role="status"><strong class="at-alert__title">Syncing</strong>Readings update every hour.</div>
```

### Success

Confirms an action worked. Show it after saving.

```html
<div class="at-alert at-alert--success" role="status"><strong class="at-alert__title">Saved</strong>Your settings are saved.</div>
```

### Warning

Something needs attention soon, but nothing has failed.

```html
<div class="at-alert at-alert--warning"><strong class="at-alert__title">Check the dates</strong>Two tenancies end this week.</div>
```

### Error

Something failed. Say what happened and what to do next.

```html
<div class="at-alert at-alert--danger" role="alert"><strong class="at-alert__title">Could not save</strong>COHO did not respond. Try again.</div>
```

### Discovery

Something new worth knowing: a new feature, or a first-use tip. Show it once, and let managers dismiss it.

```html
<div class="at-alert at-alert--discovery" role="status"><strong class="at-alert__title">New: bulk reminders</strong>Select several tenants to remind them all at once.</div>
```

## When to use

- After saving.
- When something on the page needs attention.
- At the top of a form that failed validation.

## When not to use

- For a single field error: use the field error.
- For marketing or tips.

## Content

- Lead with a short title: "Saved", "Could not save".
- Then one sentence on what to do next.

## Do and don't

Do: Say what failed and how to fix it.

```html
<div class="at-alert at-alert--danger" role="alert"><strong class="at-alert__title">Could not send reminders</strong>3 tenants have no email address. Add them and try again.</div>
```

Don't: Codes and vague messages.

```html
<div class="at-alert at-alert--danger" role="alert"><strong class="at-alert__title">Error 500</strong>Something went wrong.</div>
```

## Do

- Say what happened and what to do next.

## Don't

- Stack several alerts.

## Code

```html
<div class="at-stack at-stack--tight">
  <div class="at-alert at-alert--info" role="status"><strong class="at-alert__title">Syncing</strong>Readings update every hour.</div>
  <div class="at-alert at-alert--success" role="status"><strong class="at-alert__title">Saved</strong>Your settings are saved.</div>
  <div class="at-alert at-alert--warning"><strong class="at-alert__title">Check the dates</strong>Two tenancies end this week.</div>
  <div class="at-alert at-alert--danger" role="alert"><strong class="at-alert__title">Could not save</strong>COHO did not respond. Try again.</div>
</div>
```

## Classes

| Class | What it does |

|---|---|

| `at-alert` | Neutral |

| `at-alert--info / --success / --warning / --danger` | Variants |

| `at-alert__title` | Bold first line |

| `at-alert--success` | Success |

| `at-alert--warning` | Warning |

| `at-alert--danger` | Error |

| `at-alert--discovery` | Something new |

## Tokens

`--at-border`, `--at-bg-neutral`, `--at-border-info`, `--at-bg-info-subtle`, `--at-border-success`, `--at-bg-success-subtle`, `--at-border-warning`, `--at-bg-warning-subtle`, `--at-border-danger`, `--at-bg-danger-subtle`, `--at-border-discovery`, `--at-bg-discovery-subtle`

## Accessibility

- Use role="alert" for errors and role="status" for confirmations.