Tabs
Import
import { VKTabs, VKTab } from "@vivakits/react-components";Title
Tabs make it covenient to explore and switch between different views.
Tab 1
Orientation
Display tabs horizontally and vertically with orientation .
Color
Tabs component comes with different colors that you can change using the color.
Tab 1
Border Color
Tabs component comes with different colors that you can change using the borderColor.
Tab 1
Seperator Color
Tabs component comes with various separator colors that you can change using the separatorColor.
Tab 1
Size
Tabs component comes with different sizes that you can change using the size.
Tab 1
Disabled
Tab can be set disabled with disabled.
Tab 1
Icon
Each Tab has icon prop to set icon beside tab.
Tab 1
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| orientation | verticalhorizontal | Determines the orientation of tabs | horizontal |
| separatorColor | primarysecondarysuccessdangerwarningdarklight | For the separator color between tabs | light |
| borderColor | defaultprimarysecondarysuccessdangerwarningdarklight | For the border color of active tab | default |
| color | defaultprimarysecondarysuccessdangerwarningdarklight | For the text color of active tab | primary |
| size | defaultxssmmdlgxl2xl | Determines the size of tabs. | default |
| disabled | truefalse | Disable specific tab | false |
| icon | ReactNode | Place icon inside individual tabs | - |