Alert
An inline message in six tones, optionally dismissible.
import
import { Alert } from '@joshicodes/cock';Tones
Scheduled maintenance
Saturday from 02:00 to 03:00 UTC. Things might go down for a bit.
Payment received
Thanks. A receipt is on its way, nice and discreet.
Storage almost full
You have used 9.2 GB of 10 GB. Size does matter, apparently.
Fox spotted near the coop
Doors are closed. Headcount in progress.
Nothing to report. A plain alert for quiet context.
Behaviour
- Alerts stay in the layout and stay put. For something that happened elsewhere, use a toast.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Alert
| Prop | Type | Default |
|---|---|---|
variant | AlertVariant | 'neutral' |
title | string | — |
class | string | — |
Snippets of Alert
| Snippet | Type | Default |
|---|---|---|
icon Replace the built-in status glyph. | Snippet | — |
children | Snippet | — |
Events of Alert
| Event | Type | Default |
|---|---|---|
ondismiss Renders a dismiss button and calls back when pressed. | () => void | — |