Tabs

Tabs act as navigational anchors within digital interfaces, structuring content into discrete, manageable sections. These interactive elements streamline user experiences, not only by categorizing data but also by facilitating quick access to diverse information without the clutter of a single view.c

Examples

Default

Default Tabs.

Filled Tabs

Change the style by passing the type prop to the component.

Icon Tabs

Add icons to the left or right of the text by passing the iconLeading or iconTrailing props to the component, respectively. To just get an icon in the Tab, don't pass any children to the Tab.

Installation

Properties

For more advanced usage, see https://www.radix-ui.com/primitives/docs/components/tabs (opens in a new tab).

Tabslist

Tab