Patterns
Next actions
Two or three ranked, host-provided actions with their reason and urgency.
import { NextActions } from "@krizaka/ui/next-actions";Web only — React, from @krizaka/ui/next-actions. Beta: its API may still change in a minor version.
- Mobile · n/a. The native twin is a follow-up; compose the same actions in a native screen for now. → Button
Why it is here. Akinaza's Today and shop dashboard: the two or three highest-impact actions from bookings, stock and payments; Orazaka later.
When to use
- 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.
When not to use
- A person needs a toolbar for the current view.Use instead: Action bar
- A person must choose from many secondary actions.Use instead: Dropdown menu
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { NextActions } from "@krizaka/ui/next-actions";Examples
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 | Default | Description |
|---|---|---|---|
actionsrequired | readonly [NextAction, NextAction] | readonly [NextAction, NextAction, NextAction] | — | Two or three actions, already ordered by the host from most to least important. |
titlerequired | ReactNode | — | A heading such as “Que faire maintenant”. |
Accessibility
- An ordered list communicates the ranking without relying on colour.
- Every action and urgency word comes from the host.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves to each host-rendered action in list order. |
Best practices
- 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.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub