Skip to content

Alert

An inline message about the page or a task, in info or critical tone.

Friday deliveries move to Saturday

The courier is closed on 3 October. Your order still ships on Thursday.

Your card was declined

Update the card before Wednesday so the next bag ships on time.

import { Alert, Button } from '@brand-studio/ui';

export default function AlertDemo() {
  return (
    <div style={{ display: 'grid', gap: 14, width: '100%', maxWidth: 480 }}>
      <Alert title="Friday deliveries move to Saturday" action={<Button tone="secondary">Choose a day</Button>}>
        The courier is closed on 3 October. Your order still ships on Thursday.
      </Alert>
      <Alert tone="critical" title="Your card was declined">
        Update the card before Wednesday so the next bag ships on time.
      </Alert>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Alert } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Alert } from '@brand-studio/ui';

<Alert title="Friday deliveries move to Saturday" action={<Button tone="secondary">Choose a day</Button>}>
  The courier is closed on 3 October.
</Alert>

Accessibility

info uses role="status", which screen readers announce when they are free. critical uses role="alert", which interrupts. Use critical only when the person must act.
The tone shows in the icon and frame as well as colour, so it reads without colour vision.
Use a Toast for a passing confirmation and an Alert for a message that should stay on the page.

API Reference

Prop	Type	Default
`tone?`	`"critical" \| "info"`	`'info'`
`title`	`React.ReactNode`	–
`children?`	`React.ReactNode`	–
`action?`	`React.ReactNode`	–
`className?`	`string`	`''`