Alert

A prominent message that stays on the page. Keeps the colour system, and picks its ARIA role from severity — a destructive alert interrupts, the rest wait their turn.

src/components/ui/alert.tsx

About

From the component's own source, where it was written.

A prominent message that stays on the page.

Like Badge, an alert is meant to be noticed, so it keeps the colour system. role follows severity: a destructive alert is announced immediately, the rest are announced when the user gets to them.

Install

npx astralyx-ui add alert

Usage

import { Alert } from '@/components/ui/alert'

<Alert color="amber" icon={<AlertTriangle />} title="Quota almost reached">
  You have used 92% of your monthly builds.
</Alert>

Composer

Change the props and the source below follows.

Quota almost reached

You have used 92% of your monthly builds.

Props

variant

color

size

title

children

icon

tsx

<Alert
  icon={<Info />}
  title="Quota almost reached"
>
  You have used 92% of your monthly builds.
</Alert>

Examples

Severities

tsx

<Alert color="green" icon={<CheckCircle2 />} title="Deployed" />
<Alert color="amber" icon={<AlertTriangle />} title="Quota almost reached" />
<Alert color="destructive" icon={<AlertTriangle />} title="Build failed" />

Variants

tsx

<Alert variant="default" /> <Alert variant="outline" /> <Alert variant="solid" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Alert`

A prominent message that stays on the page.

Extends Omit<ComponentProps<'div'>, 'color' | 'title'>.

Prop	Type	Default	Description
color	'neutral' \| 'blue' \| 'violet' \| 'cyan' \| 'green' \| 'amber' \| 'rose' \| 'destructive'	'neutral'	Named colour set. destructive also switches role to "alert".
variant	'default' \| 'outline' \| 'solid'	'default'	Tinted panel, outline, or solid fill.
size	'sm' \| 'default'	—	—
icon	ReactNode	—	Leading icon, aligned to the first line of the title.
title	ReactNode	—	Bold first line. Children become the body.
tint	string	—	Any CSS colour, used instead of a named set.

`AlertTitle`

Extends ComponentProps<'div'>.

`AlertDescription`

Extends ComponentProps<'div'>.

Functions

Function	Signature	Description
alertVariants	(props?: { variant?: 'default' \| 'outline' \| 'solid'; color?: 'neutral' \| 'blue' \| 'violet' \| 'cyan' \| 'green' \| 'amber' \| 'rose' \| 'destructive'; size?: 'sm' \| 'default' }) => string	A prominent message that stays on the page.

Types

Type	Definition	Description
`ColorSet`	keyof typeof colorSet	—