Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Basic Usage

Make changes to your account here.

Example

Variants

Use the variant prop to control the visual style of the tabs.

• Line: Default style with a bottom border and an active indicator.
• Card: Card style with borders.
• Underline: Simple underline style.

Line Variant

Content 1

Card Variant

Content 1

Underline Variant

Content 1

Example

Vertical Tabs

Use the position prop to control the position of the tabs list.

Account settings here.

Example

Scrollable Tabs

Set the scrollable prop on BrTabsList to enable scrolling when tabs exceed the container width.

Content 1

Example

Closable Tabs

Set the closable prop on BrTabs or BrTabsTrigger to make tabs closable.

Content 1

Example

Theming

Global Customization (BrConfigProvider)

You can override default CSS variables via the theme prop of BrConfigProvider.

Emerald Theme with ConfigProvider

Account (Emerald Theme)

Example

API

BrTabs Props

Name	Type	Default	Description
variant	string	'line'	Visual style variants: line, card, underline
position	string	'top'	Position of the tabs list: top, right, bottom, left
responsive	boolean	false	Whether the tabs are responsive
closable	boolean	false	Whether the tabs are closable
draggable	boolean	false	Whether the tabs are draggable
lazyLoad	boolean	true	Whether the tabs content should be lazy loaded
limit	number	0	The maximum number of visible tabs before collapsing

Plus all props from Radix Vue TabsRoot.

BrTabsList Props

Name	Type	Default	Description
scrollable	boolean	false	Whether the tabs list should be scrollable

Plus all props from Radix Vue TabsList.

BrTabsTrigger Props

Name	Type	Default	Description
closable	boolean	undefined	Whether the tab is closable. Overrides parent closable
draggable	boolean	undefined	Whether the tab is draggable. Overrides parent draggable

Plus all props from Radix Vue TabsTrigger.

BrTabsContent Props

All props from Radix Vue TabsContent.

Emits

Name	Description	Parameters
update:modelValue	Emitted when the selected tab changes	`(value: string
close	Emitted when a tab close button is clicked	`(value: string
drag-end	Emitted when drag ends	`(newOrder: (string