Patrons
Next actions
Two or three ranked, host-provided actions with their reason and urgency.
import { NextActions } from "@krizaka/ui/next-actions";Web uniquement — React, depuis @krizaka/ui/next-actions. Bêta : son API peut encore changer à une version mineure.
- Mobile · n/a. The native twin is a follow-up; compose the same actions in a native screen for now. → Button
Pourquoi il est là. Akinaza's Today and shop dashboard: the two or three highest-impact actions from bookings, stock and payments; Orazaka later.
Quand l’utiliser
- A shop owner needs to know what to do first from the figures on a page.
- A page should surface a few concrete follow-ups without inventing work.
Quand ne pas l’utiliser
- A person needs a toolbar for the current view.À la place : Action bar
- A person must choose from many secondary actions.À la place : Dropdown menu
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { NextActions } from "@krizaka/ui/next-actions";Exemples
A shop owner's next steps
Three concrete actions ordered by urgency, with a reason for each.
Props
“What to do now”: two or three ranked actions, with their reason and urgency.
| Prop | Type | Défaut | Description |
|---|---|---|---|
actionsrequis | readonly [NextAction, NextAction] | readonly [NextAction, NextAction, NextAction] | — | Two or three actions, already ordered by the host from most to least important. |
titlerequis | ReactNode | — | A heading such as “Que faire maintenant”. |
Accessibilité
- An ordered list communicates the ranking without relying on colour.
- Every action and urgency word comes from the host.
Clavier
| Touches | Action |
|---|---|
| Tab | Moves to each host-rendered action in list order. |
Bonnes pratiques
- Pass two or three actions in priority order; the component preserves that order.
- Give each action one line on why it matters, a localized urgency word and a host-rendered link, button or command.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub