Action bar
A row of link actions — discuss, propose, report, read the docs, see the code: buttons with their words at the end of a page, or icon buttons whose words are a tooltip at the foot of a card.
Web uniquement — React, depuis @krizaka/ui/action-bar. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- The ways to answer at the end of a page or in a
CtaPanel. - Secondary actions at the foot of a card, where room is short (
variant="icons").
Quand ne pas l’utiliser
- For actions that run in the app (save, delete): those are buttons, not links.À la place : Button
- For a menu of many choices.À 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 { ActionBar } from "@krizaka/ui/action-bar";Exemples
Buttons
Read, see the code, discuss — the first one primary.
Icon actions
Discuss, propose, report: icon buttons with their words in a tooltip.
Props
A row of link actions: buttons with their words, or icon buttons with a tooltip.
| Prop | Type | Défaut | Description |
|---|---|---|---|
actionsrequis | readonly Action[] | — | The actions, in order of importance. |
label | string | — | What the actions are about (Talk about Krizaka Java): the list's accessible name. |
linkAs | LinkComponent | — | The app's link component for internal addresses (Next's Link); an <a> otherwise. |
primaryFirst | boolean | false | The first action as the primary button (the one action a block is about); the others stay secondary. |
size | "sm" | "md" | "lg" | md | The buttons' size: sm in a card, md in a section, lg on a hero or a closing call. |
variant | "buttons" | "icons" | buttons | buttons (with their words) or icons (icon buttons, the words in a tooltip). |
Accessibilité
- A list named by
label; each action is a link with its words as its accessible name. - An absolute address opens in a new tab and wears the external mark.
- The tooltip of an icon action is CSS only (no portal, no script): it repeats the accessible name.
Clavier
| Touches | Action |
|---|---|
| Tab | Moves between the actions; an icon action shows its words while focused. |
Bonnes pratiques
- Order by importance;
primaryFirstwhen one action is what the block is about. - Two or three actions; more belong in a menu or a page.
- Icons from the signature set, the same icon for the same action everywhere.
Composants liés
Générée depuis le code de @krizaka/ui 2.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Treemap
Nested parts of a whole as rectangles — storage by project then by kind — a click zooming into a part.
Argument card
A compact card that argues — about a third of a full card: who (icon, name, the bird in the corner), the trap in one line, facts and one short action; the long version lives on a detail page or unfolds in place.