Alert

Updated November 2, 2026

Alert is an inline status banner in a 2px frame, led by a pixel glyph so info, success, warning and danger aren't told by color alone. It's a polite status for screen readers, or an alert for danger, and can carry a title, an action and a Dismiss button. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Export ready

Your CSV has 1,204 rows.

Chart saved to your dashboard.

Seats almost full

9 of 10 Team seats are in use.

Sync failed

We couldn't reach the data source. Check its URL and try again.

import "@/components/dithercharts/controls.css"
import { Alert } from "@/components/dithercharts/alert"
import { Button } from "@/components/dithercharts/button"

<Alert title="Export ready">Your CSV has 1,204 rows.</Alert>
<Alert variant="success" dismissible onDismiss={() => setSaved(false)}>Chart saved to your dashboard.</Alert>
<Alert
  variant="warning"
  title="Seats almost full"
  action={<Button size="sm" variant="outline" onClick={addSeats}>Add seats</Button>}
>
  9 of 10 Team seats are in use.
</Alert>
<Alert variant="danger" title="Sync failed">We couldn't reach the data source.</Alert>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add alert

Props

It renders a native element, so every other attribute that element takes passes through.

Alert props
Prop	Type	Default	Description
variant	Type "info" \| "success" \| "warning" \| "danger"	Default `"info"`	The banner's status, shown by its pixel glyph; danger is drawn in the danger color and interrupts screen readers.
title	Type ReactNode	Default –	A short heading in pixel caps, above the message.
children	Type ReactNode	Default –	The message.
action	Type ReactNode	Default –	A control under the message, e.g. a small Button.
dismissible	Type boolean	Default `false`	Adds a Dismiss button that hides the banner.
onDismiss	Type () => void	Default –	Called when the banner is dismissed.