TabBar

Tabs make it easy to explore and switch between different views.

Scrollable Tabs

A simple uncontrolled scrollable example:

First tab

Second tab

Third tab

Fourth tab

Fifth tab

Sixth tab

Seventh tab

The content of First Tab!

You can force the left and right scroll buttons to be hidden by setting scrollHandleVisibility property to 'off'. (the default value is 'auto' which will automatically show these buttons on overflow)

Fluid Tabs

A simple uncontrolled fluid example:

First tab

Second tab

Third tab

The content of First Tab!

Fluid tabs should be used with a fixed limited number of tabs and when consistent placement will aid muscle memory.

With Icons

To provide icon to the tabs use icon property on the TabBar/Tab components.

Tab 1

Tab 2

Tab 3

Controlled Tabs

You can use the activeTab, and onChange properties to control the behaviour of the tabs.

First tab

Second tab

Third tab

Fourth tab

Fifth tab

Sixth tab

Seventh tab

The content of First Tab!

API

Learn more about the properties and the customization points.

Usage

import TabBar, { Tab } from "@sonnat/ui/TabBar";

//or
import { TabBar, Tab } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

TabBar Properties

TabBar Properties
Name	Type	Default	Description
children	node	-	The content of the tabbar.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
activeTab	number \| string	-	The currently selected tab.
defaultActiveTab	number \| string	-	The default selected tab. Use when the tabbar is not controlled.
scrollHandleVisibility	"auto" \| "off"	"auto"	Determines the behavior of scroll buttons when `variant="scrollable"` : - `"auto"` will automatically show them on overflow. - `"off"` won't show them.
variant	"scrollable" \| "fluid"	"scrollable"	The variant of the tabbar.
size	"large" \| "medium" \| "small"	"large"	The size of the tabbar.
onChange	function	-	The callback fires when the state has changed. Signature: `function(identifier: number \| string) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

TabBar/Tab Properties

TabBar/Tab Properties
Name	Type	Default	Description
label	string	-	The label of the tab.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
icon	node	-	The leading icon element placed before the label.
identifier	number \| string	-	A unique identifier for the tab. If not provided the index of the tab (which is zero-base) will be considered as the identifier.
onClick	function	-	The callback fires when the tab has been clicked. Signature: `function(identifier: number \| string) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.