Design System

Alerts

Section-level status messages. One component, four appearances and two densities — never a bespoke alert per screen.

Alert

Communicates the status of the section it sits in. The icon and the text always carry the meaning; colour only reinforces it.

import { Alert } from "@/design-system";

When to use

  • A single-line status message above a list, table or form
  • A message that needs a short explanation and an action

When not to use

  • Page-wide or account-level announcements — use Banner
  • Transient confirmations — use Toast
  • Field-level validation — use InlineFeedback

Compact — single-line

One line of status copy in the tinted status colour. Use density='compact'.

Custom alert Lorem ipsum dolor sit amet consectetur adipisicing elit.

Success message Lorem ipsum dolor sit amet consectetur adipisicing elit.

Plain — no fill

For quiet status lines inside an already tinted or bordered container.

Custom alert Lorem ipsum dolor sit amet consectetur adipisicing elit.

Records sync every 15 minutes.

Accent bar

A tinted panel with a status bar on the leading edge for messages that need a little more weight.

Prominent — framed icon and inline action

iconFrame plus actionPlacement='inline' for a bulk-selection or invitation message.

50 / 248 never logged-in residents selected. Select all 248 never logged-in residents

Only 185 residents have valid email addresses. Invitations can only be sent to them.

Comfortable — title, description and action