Components

Alert

A notice, warning or failure beside what it is about: a tinted box, or a plain line in a form or card.

Changes to this item apply from next month.

Your data is up to date on every device.

Your data will be deleted for good.

Without your password or recovery key, nobody can open it. Starting over gives you a new, empty vault.

Import

import { Alert } from '@rinzai/zen';

Examples

Plain

plain: just the icon and text, for a line inside a card or a form. Any icon, or none.

Currency

Getting today’s rate…

Couldn’t get today’s rate, so converting isn’t possible right now.

API reference

<Alert>

A message beside the content it's about: a notice, a warning, a failure. A tinted box by default, or with plain, just the icon and text in the tone's colour. With a title, the title takes the tone and the text under it is quieter. Bad news is announced at once (role="alert"), anything else politely (role="status"); pass role to change that, e.g. "note" for a message that doesn't change.

Prop	Type	Default
`icon` Replaces the tone's icon (info, check, warning); `null` for none.	`ReactNode`	`—`
`plain` Just the icon and text, no box: for a line inside a form or a card.	`boolean`	`false`
`title` A first line in the tone's colour; the text under it is quieter.	`ReactNode`	`—`
`tone` `positive` in the accent colour, `negative` in red for bad news.	`"default" \| "negative" \| "positive"`	`default`