KKUONIDesign System

Components

Alert

Stable

Alerts are inline messages that communicate important, contextual status to the user.

Alerts surface contextual information directly in the flow of a page — a confirmation, a warning about availability, an error that needs attention. They stay in context, unlike a toast or a modal, so they suit information tied to the content around them.

Usage

Reach for an Alert when a message is tied to the surrounding content and should persist in the page flow — a booking confirmation, a failed payment, a low-availability warning. If the message applies sitewide rather than to a specific piece of content, use a Banner instead; for a passive supporting note that isn't a status update, use a Callout.

Alerts typically appear directly above or below the content they relate to: at the top of a form after submission, beside a price when availability is limited, or within a booking summary.

Anatomy

  1. 1
    Icon — Reinforces the tone (info, success, warning, danger).
  2. 2
    Title (optional) — A short summary of the message.
  3. 3
    Body — The detail and any next step.

Tones

Without a title

For brief messages, omit the title and let the body stand alone.

Best practices

Do

Use danger only for genuine errors that block progress.

Match the tone to the severity.

Don't

Use alerts for routine, non-essential messaging.

Constant alerts train people to ignore them.

Props

PropTypeDefaultDescription
tone'info' | 'success' | 'warning' | 'danger''info'Severity and colour of the alert.
titlestring—Optional bold summary line.
childrenReactNode—The message body.
classNamestring—Additional classes.

Accessibility

  • The container has role="alert", so assistive technology announces the message when it appears.
  • The tone icon is aria-hidden — meaning comes from the text, not the colour or icon alone.
  • For errors that result from a user action (a failed payment), move focus to the alert so it isn't missed.

Related components

  • Banner — use for sitewide announcements rather than content-tied messages.
  • Callout — use for a passive supporting note rather than a status update.