An inline notice in four tones with an optional icon, title, body, and trailing action slot.
InfoSuccessWarningDangerWith action
Quota almost reached
api-gateway is at 92% of its monthly request quota.
Scheduled maintenance
api-gateway will be read-only on Sunday from 01:00 to 02:00 UTC.
Invoice sent
Invoice INV-2032 was emailed to ana@example.com.
Deployment failed
The release branch did not build.
<Alert tone="warning" title="Quota almost reached"> api-gateway is at 92% of its monthly request quota.</Alert>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Alert } from '@chanrg/4ui';<Alert tone="warning" title="Quota almost reached"> api-gateway is at 92% of its monthly request quota.</Alert>With action
The action slot sits outside the text column, so a single next step stays on the same line as the notice.
Two projects need review
Review them before the billing period closes.
<Alert tone="warning" title="Two projects need review"> Review them before the billing period closes. {#snippet action()}<Button size="sm" variant="secondary">Review</Button>{/snippet}</Alert>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | info | success | warning | danger | info | Semantic colour treatment, and whether the notice interrupts. |
title | string | — | Bold first line. |
icon | Snippet | — | Leading glyph, tinted with the tone and hidden from assistive technology. |
children / action | Snippet | — | Explanatory body and a trailing control cluster. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-info / --4ui-success | Tone colour for the calm variants. |
--4ui-warning / --4ui-danger | Tone colour for the variants that interrupt. |
Accessibility
- Warning and danger render role="alert" and interrupt; info and success are read in document order like any other block.
- The icon is decorative — the tone is always carried by the title and body text.