Inline alert

Stable

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.

Settings savedReminders will go out at 9am.

---

Specifications

LightDark

Anatomy

Check the datesTwo tenancies end this week.

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)

Information

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

LightDark

Example

SyncingReadings update every hour.

Success

Confirms an action worked. Show it after saving.

LightDark

Example

SavedYour settings are saved.

Warning

Something needs attention soon, but nothing has failed.

LightDark

Example

Check the datesTwo tenancies end this week.

Error

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

LightDark

Example

Could not saveCOHO did not respond. Try again.

Discovery

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

LightDark

Example

New: bulk remindersSelect several tenants to remind them all at once.

---

Usage

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

Could not send reminders3 tenants have no email address. Add them and try again.

DoSay what failed and how to fix it.

Error 500Something went wrong.

Don'tCodes and vague messages.

Do

• Say what happened and what to do next.

Don't

• Stack several alerts.

---

Implementation

HTML

Copy

<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 used

--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.

Related

Field: label, hint and error

Every form control sits in a field: label, optional hint, the control, and an error when it is wrong.

View component

Empty state

What to show when there is nothing to show yet.

View component