Tabs
This component is an implementation of a custom tab
Tabs
Tabs
Align, Gap and Width
Direction
Type
Disabled
Bold
Text Size
Start Enhancer and End Enhancer
Width and Height
Tabs Props
| Name | Type | Default | Required | Description |
|---|
| id | string | | No | ID of the element |
| defaultValue | string | | Yes | the tab that will be selected by default |
| direction | horizontal | vertical | vertical | No | Set direction |
| type | standard | success | warning | error | disabled | standard | No | Set styles depending of the type |
| borderRadius | string | 5px | No | Set border radius |
| width | string | | No | Set width size |
| height | string | | No | Set height size |
TabsList Props
| Name | Type | Default | Required | Description |
|---|
| width | string | 100% | No | Set width size |
| justifyContent | space-around | start | center | end | space-around | space-between | No | Set horizontal position |
| gap | string | | No | Set separation size between elements |
TabsTrigger Props
| Name | Type | Default | Required | Description |
|---|
| value | string | | Yes | value of the element |
| width | string | 100% | No | Set width size |
| textSize | string | | No | Set text size |
| textColor | string | black | No | Set text color |
| bold | boolean | false | No | Set text bold |
| startEnhancer | string | ReactNode | | No | Set icon to start |
| endEnhancer | string | ReactNode | | No | Set icon to end |
| disabled | boolean | false | No | Set disabled mode |
TabsContent Props
| Name | Type | Default | Required | Description |
|---|
| value | string | | Yes | value of the element |