Skip to main content

Tabs

Tabs make it easy to switch between different views.

When To Use#

Use tabs for functional aspects of a page.

Examples#

import { Tabs } from 'tailor-ui/lab';

Basic#

Active Tab is 1

With size#

With controlled activeValue#

Card type tab#

Active Tab is 1

Card type tab with size#

API#

Tabs#

PropertyDescriptionTypeDefault
defaultValueInitial active Tab's value, if activeValue is not set.string
valueCurrent Tab's valuestring
onChangeCallback executed when active tab is changed(activeValue: string) => void
sizePreset tab bar size'sm' | 'md' | 'lg''md'
typeType of tab'line' | 'card''line'

Tabs.Tab#

PropertyDescriptionTypeDefault
valueTab's valuestring