Tabs Component

[ergenekonyigit]

Design

Figma Design Document

Implementation

General usage example:

  const [value, setValue] = useState("tab1");
  //...
  <Tabs value={value} onValueChange={setValue}>
    <Tabs.List>
      <Tabs.Option value="tab1" title="tab 1" caption="" badge={<Badge variant="" />} icon="" disabled>
      <Tabs.Option value="tab2" title="tab 2"  caption="" badge={<Badge variant="" />} icon="">
    </Tabs.List>
    <Tabs.Content value="tab1"><ContentView /></Tabs.Content>
    <Tabs.Content value="tab2"><ContentView /></Tabs.Content>
  </Tabs>

Rules

• A tab should contain a title and may contain caption, icon and badge.
• There should be a border between tabs. Don’t use border on the last tabs end.
• Tab title and caption texts are limited to one line.
• The default view is that one tab is preselected and is usually the first tab. Only one tab can be selected at a time. When a user chooses a new item, the previous tab is automatically deselected.
• Should respect to contribution guideline

API Reference:

Tabs component

Tabs are used to organize related content. They allow the user to navigate between groups of information that appear within the same context.

Tabs Properties

Property	Description	Default Value
value (string)	The value of the Tab	-
onValueChange (function)	The onValueChange function of the Tab	-
defaultValue (string)	The defaultValue of the Tab	-

Tabs.Option Properties

Property	Description	Default Value
value (string)	The value of the Tab	-
title (string)	The title of the Tab	-
caption (string)	The caption of the Tab	-
icon (string)	The icon of the Tab	-
badge (Badge)	The badge of the Tab	-
disabled (boolean)	The disabled state of the Tab	false
visible (boolean)	The visible state of the Tab	true

[buseselvi]

Here is the design documentation link. 🚀