Components
Tabs
Views of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
Why it is here. Used by Orochia, Orazaka, krizaka.com.
When to use
- To split a page into sections the user switches between without leaving it: videos, stories, about.
variant="segmented"for a view switch (grid, list);pillsfor a feed's sections.
When not to use
- For a filter that narrows a list.Use instead: Chip
- To go to other pages: use links in the navigation.
- For a choice in a form.Use instead: Radio group
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Tabs } from "@krizaka/ui/tabs";Examples
Underline
The sections of a page; a disabled tab is skipped.
Twelve videos, newest first.
Segmented
A view switch: equal segments in a track.
Four columns of cards.
Pills
A feed's sections, scrolling sideways on a phone.
Twelve videos, newest first.
Vertical
orientation="vertical": the list on the side.
Twelve videos, newest first.
Props
value/defaultValue + onValueChange, orientation (horizontal by default), variant for the list.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "segmented" | "underline" | "pills" | underline | underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). |
Accessibility
- Radix Tabs:
tablist,tabwitharia-selectedandaria-controls,tabpanel; name the list witharia-label. - A disabled tab is skipped.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves to the active tab, then into its panel. |
| Arrow keys / Home / End | Move between tabs and activate them. |
Best practices
- Short labels of one or two words; the active one should be clear without colour.
- Keep the URL in sync with the active tab when a tab is worth sharing.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub