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 only — React, from @krizaka/ui/action-bar. Beta: its API may still change in a minor version.
When to use
- 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").
When not to use
- For actions that run in the app (save, delete): those are buttons, not links.Use instead: Button
- For a menu of many choices.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 { ActionBar } from "@krizaka/ui/action-bar";Examples
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 | Default | Description |
|---|---|---|---|
actionsrequired | 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). |
Accessibility
- 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.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves between the actions; an icon action shows its words while focused. |
Best practices
- 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.
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on 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.