Components
Alert
A message in the flow of the page: a tone, an icon, a title, a text and an optional action.
Web only — React, from @krizaka/ui/alert. Stable: its API only changes in a major version.
Why it is here. Used by Orazaka.
When to use
- To tell the reader something about the whole page or section: a new rule, an account state, a failed payment.
- When the message must stay visible until the situation changes (a low balance, an expired card).
- With an
actionwhen there is one obvious next step: “Top up”, “Retry”.
When not to use
- For the result of an action the user just took (saved, sent): it should come and go.Use instead: Toast
- When the user must answer before going on.Use instead: Dialog
- To explain why a field is invalid: put the error under the field.Use instead: Field
- When a list or a panel has nothing to show.Use instead: Empty state
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Alert } from "@krizaka/ui/alert";Examples
Info
The default tone: news the reader should know, announced politely.
New payout schedule
Payouts now arrive every Monday.
Success
A state that is now good: verified, paid, connected.
Account verified
You can now receive payouts.
Warning
Something will go wrong soon, with what to do about it.
Low balance
Two tips left before a top-up.
Danger
Something went wrong: what failed and how to fix it.
Payment failed
The card was declined. Try another one.
Title only
A short message needs no icon and no text.
New payout schedule
Props
| Prop | Type | Default | Description |
|---|---|---|---|
action | ReactNode | — | What to do: a Button, a link. |
icon | ReactNode | — | A decorative icon (hidden from assistive technology). |
title | ReactNode | — | The headline, in bold above the text. |
tone | AlertTone | info | The tone: danger and warning are announced at once (role="alert"), info and success politely. |
Accessibility
dangerandwarningrenderrole="alert"(announced at once);infoandsuccessrenderrole="status"(announced politely).- Render the alert when the situation occurs, not before: a live region only announces content that changes.
- The icon is hidden from assistive technology; the title and the text carry the meaning.
Best practices
- Lead with the title: what happened, in a few words; the text says what it means or what to do.
dangerandwarningonly for what needs attention now: an alert that is always there stops being read.- The icon is decorative and the tone is carried by the tint, the border and the icon: the text stays legible in both themes.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub