Balance Logo
Balance
Reckon Design System

Tabs

Tabs are used to navigate between related pages or views while retaining context.
Install
pnpm add @reckon-web/tabs
Import usage
import {
useTabList,
useTabListState,
useTabListEventListeners,
TabList,
TabItem
} from '@reckon-web/tabs';
  • Code
  • API

@reckon-web/tabs exposes both a set of visual primitives that have the appearance of tabs along with helpers to create semantic tabs.

This allows the tabs to be used as navigational elements or as semantic tab elements.

Usage

Open in Playroom

Usage as semantic tabs

First content

Usage as navigational elements

To use the tab components as navigational elements, you can use the as prop. The example below shows using regular a elements, you can also use a client side routed link component such as NextLink from @reckon-web/next-link though.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.