Tabs Buttons
Usage and anatomy
Tabs Button uses a segmented-control treatment for switching between related panels or views. Match each TabsButton.Trigger value with a TabsButton.Content value.
import * as TabsButton from "@acme/ui/tabs-button"<TabsButton.Root defaultValue="grid"><TabsButton.List aria-label="View"><TabsButton.Trigger value="grid"><TabsButton.TriggerLabel>Grid</TabsButton.TriggerLabel></TabsButton.Trigger><TabsButton.Trigger value="list"><TabsButton.TriggerLabel>List</TabsButton.TriggerLabel></TabsButton.Trigger></TabsButton.List><TabsButton.Content value="grid">Grid view</TabsButton.Content><TabsButton.Content value="list">List view</TabsButton.Content></TabsButton.Root>
Compose trigger text and icons with TabsButton.TriggerLabel and TabsButton.TriggerIcon. Size, variant, and orientation are inherited from the root.
Tabs Button - Plain
License required
In order to get the source code for this component, you need to buy a license.
Tabs Button - Sizes
License required
In order to get the source code for this component, you need to buy a license.
Tabs Button - With icons
License required
In order to get the source code for this component, you need to buy a license.
Tabs Button - Border
License required
In order to get the source code for this component, you need to buy a license.
Tabs Button - Vertical
License required
In order to get the source code for this component, you need to buy a license.
Tabs Button - With content
License required
In order to get the source code for this component, you need to buy a license.
API reference
TabsButton.Root
| Prop | Type | Default |
|---|---|---|
| size | sm | md | lg | xl | xxl | md |
| variant | plain | border | plain |
| orientation | horizontal | vertical | horizontal |
| defaultValue | string | — |
| value | string | — |
TabsButton.Root also accepts Radix Tabs root props, including onValueChange. TabsButton.List, TabsButton.Trigger, and TabsButton.Content accept their corresponding Radix props.