A compact semantic notification with optional dismissal.
InfoSuccessWarningDanger
Configuration saved
The live dashboard is using the new thresholds.
Connection delayed
<Toast title="Configuration saved" tone="success" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Toast } from '@chanrg/4ui';<Toast title="Configuration saved" tone="success" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Notification heading. |
tone | info | success | warning | danger | info | Semantic treatment. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Uses a live status region.