Alert

A hand-drawn inline alert/banner for status messages in four severities.

Overview

An Alert (banner) is an inline message conveying the status of a task or the page — informational, success, warning, or danger. It sits in the layout (unlike a Toast, which floats and auto-dismisses).

Anatomy

A sketchy box (@ghds/sketch-core) with a severity-coloured outline and icon, an optional bold title, a message, and an optional dismiss button.

Variants & States

State	Status	Notes
Info / Success / Warning / Danger	Implemented	The four severities, each with its own colour + icon.
Dismissible	Implemented	Opt-in close button (React/RN: onDismiss; WC: dismissible + dismiss event).

Usage

Match the severity to the message: success for confirmations, danger for errors.
Keep the message short and actionable.
Place it near the content it refers to.

Don't

Don't use an Alert for transient feedback — use a Toast.
Don't rely on colour alone; the icon and text carry the meaning too.

Accessibility

All platforms: danger alerts use role="alert" (assertive); the others use role="status" (polite), so screen readers announce them appropriately. The severity icon pairs with text so colour is never the sole signal.
The dismiss button is a labelled button (“Dismiss”).
See the Accessibility Guide.

Content

An optional short title plus a concise message.

Props API

React`@ghds/react`

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Severity.
`title`	`ReactNode`	—	Optional bold title.
`children`	`ReactNode`	—	Message body.
`onDismiss`	`() => void`	—	Renders a dismiss button that calls this.

Web Components`@ghds/web-components`

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Severity (reflected).
`heading`	`string`	—	Optional bold title.
`dismissible`	`boolean`	`false`	Show a dismiss button.
`dismiss event`	`CustomEvent`	—	Dispatched from the dismiss button.

React Native`@ghds/react-native`

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Severity.
`title`	`string`	—	Optional bold title.
`children`	`ReactNode`	—	Message body.
`onDismiss`	`() => void`	—	Renders a dismiss button that calls this.
`testID`	`string`	—	Test handle for queries.

Code examples

// React — @ghds/react
import { Alert } from '@ghds/react/alert';

<Alert variant="danger" title="Error" onDismiss={() => dismiss()}>
  Something went wrong.
</Alert>;

<!-- Web Components — @ghds/web-components -->
<script type="module">
  import '@ghds/web-components/alert';
</script>
<gh-alert variant="danger" heading="Error" dismissible>Something went wrong.</gh-alert>

// React Native — @ghds/react-native
import { Alert } from '@ghds/react-native/alert';

<Alert variant="danger" title="Error" onDismiss={() => dismiss()}>
  Something went wrong.
</Alert>;

Live Demo

React @ghds/react

Web Components @ghds/web-components

An info message.

A success message.

A warning message.

A danger message.