Skip to Content

Tabs

The tabs is a disclosure component to navigate between multiple content sections.

view source code view stories

Import

Import
import { Tabs } from '@backyard-ui/core';

Usage

Usage

Icon

Icon

To use some icon just put it into the TabsTrigger.

Disabled

Disabled

Use the isDisabled prop to disable some tabs.

Controlled

Controlled

By default, the Tabs are uncontrolled but you can make it controlled

API Reference

API Reference

Root

Root
  • color
    Description The Tab appearance
    Type
    "primary" | "secondary" | "tertiary"
    Default
    primary
  • asChild
    Description
    Type
    boolean

List

List
  • isLoop
    Description
    Type
    boolean
  • asChild
    Description
    Type
    boolean

Trigger

Trigger
  • isDisabled
    Description
    Type
    boolean
  • asChild
    Description
    Type
    boolean

Content

Content
  • asChild
    Description
    Type
    boolean
prev Collapsible