Skip to content

Alert

An inline message about the page or a section of it, in one of five tones.

betaSource
Scheduled maintenance
Claims can't be submitted on Sunday between 02:00 and 04:00 UTC. Anything in progress is saved.
You can add up to 4 dependants
Spouse, children and parents can share your cover.

Installation

pnpm add @syntara/react @syntara/tokens
import { Alert } from '@syntara/react';

Usage

import { Alert } from '@syntara/react';

export function CardNotice() {
  return (
    <Alert tone="warning" title="Card expiring">
      Your card ending 4821 expires next month. Order a replacement.
    </Alert>
  );
}

Examples

Tones

Neutral, info, success, warning and danger. Each tone has its own filled shape, so colour is never the only signal.

Draft saved
You can finish this claim later from your dashboard.
New benefit available
Annual health check-ups are now covered in full.
Claim approved
₹12,400 will reach your account within 3 working days.
Card expiring soon
Your card ending 4821 expires next month. Order a replacement.
Payment failed
We couldn't charge your card. Check the details and try again.

Actions, dismiss and live

Action weight by severity (contrast on a danger alert, outline on a success one), a dismissible alert, and a live alert with no icon and a link action.

Payment failed
We couldn't charge your card ending 4821.
Documents uploaded
3 files were added to your claim.

Accessibility

KeysAction
TabMoves to the action and the close button, in reading order.
EnterorSpaceActivates the focused close button or action.
  • No live role by default, so alerts rendered with the page are not re-announced. Set `live` for alerts that appear after a user action (e.g. a failed submit).
  • With `live`, the alert is named by its title (aria-labelledby).
  • The close button is a 24×24px target (WCAG 2.5.8) and has an accessible name.
  • Each tone has its own filled shape and a text title, so colour is never the only signal. The shape is feedback.<tone>.fg: ≥ 6.09:1 against the surface, including the sheen's brightest pixel (WCAG 1.4.11 needs 3:1). The knocked-out glyph is feedback.<tone>.bg: ≥ 5.43:1 against the shape. Both hold for every tenant and the 1,000 fuzz brands in both schemes, and test/alert.test.tsx re-proves them.
  • Surface recipe: an opaque surface.raised face, --syntara-sheen in dark, a neutral hairline and the raised shadow. Only text.default and text.subtle sit on it.

Guidelines

Do

  • Lead with what happened, then what to do next.
  • Use danger for problems that block the task; warning for things that will become problems.
  • Keep the action to one short verb phrase.
  • Give danger and warning alerts a `contrast` action and the others an `outline` one, so the strongest button on the page is the one that fixes something.

Don’t

  • Don't use an alert for transient confirmations — use a toast.
  • Don't set `live` on alerts that are present when the page loads.
  • Don't stack several alerts of the same tone; combine them.

API reference

Alert

tone
  • neutraldefault
  • info
  • success
  • warning
  • danger

Sets the filled status shape and its colour. The surface is the same for every tone.

title
ReactNode

Short summary shown in semibold above the body.

children
ReactNode

The message body, in text.subtle. Links inside are underlined.

icon
ReactNode | false

Replaces the filled status shape; it takes the tone colour (feedback.<tone>.fg). `false` shows no icon.

action
ReactNode

One small Button or a link. It sits at the inline end and wraps under the text when the alert is narrow. Match its weight to the tone: `<Button size="sm" variant="contrast">` for danger and warning, `variant="outline"` otherwise.

onDismiss
() => void

Shows a close button that calls this. You remove the alert.

dismissLabel
string

Accessible name of the close button.

Default 'Dismiss'

live
boolean | 'assertive' | 'polite'

Announce the alert when it appears: `true`/'assertive' → role="alert", 'polite' → role="status". Leave unset for alerts present on page load.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour7
feedback.*.bgfeedback.*.fgfocus.ringsurface.raisedtext.defaulttext.subtleborder.subtle
Type9
font.bodyfont.size.mdfont.size.smfont.weight.semiboldline-height.normalline-height.snugfont.tracking.mdfont.tracking.smfont.weight.medium
Space and size7
space.3space.4space.6space.16card-insetspace.1space.2
Shape3
radius.containerradius.buttonradius.badge
Depth2
shadow.raisedhairline
Motion4
motion.duration.fastmotion.duration.springmotion.easingmotion.spring
Other2
sheenrim