Composants
Alert
A message in the flow of the page: a tone, an icon, a title, a text and an optional action.
Web uniquement — React, depuis @krizaka/ui/alert. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orazaka.
Quand l’utiliser
- 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”.
Quand ne pas l’utiliser
- For the result of an action the user just took (saved, sent): it should come and go.À la place : Toast
- When the user must answer before going on.À la place : Dialog
- To explain why a field is invalid: put the error under the field.À la place : Field
- When a list or a panel has nothing to show.À la place : Empty state
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Alert } from "@krizaka/ui/alert";Exemples
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 | Défaut | 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. |
Accessibilité
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.
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub