@highlight-ui/tab

Using npm:

``bash
npm install @highlight-ui/tab
`

Using yarn:

`bash
yarn add @highlight-ui/tab
`

Using pnpm:

`bash
pnpm install @highlight-ui/tab
`

In your (S)CSS file:

`scss
@import url('@highlight-ui/tab');
`

Once the package is installed, you can import the library:

`ts
import { Tab, TabItem } from '@highlight-ui/tab';
`

Usage

`tsx
import React from 'react';
import { Tab, TabItem } from '@highlight-ui/tab';

export default function TabExample() {
return (

Lorem
Ipsum

);
}
`

Props 📜

$3

| Prop | Type | Required | Default | Description |
| :---------- | :-------------------------- | :------- | :------ | :----------------------------------- |
| placement | 'left', 'center', 'right' | No | | Horizontal alignment of the Tabs |
| disabled | boolean | No | false | Sets the disabled state on the Tab |
| onChange | () => void | No | | The onChange event handler |
| value | string | No | | The value of the Tab |
| className | string | No | | Allows providing a custom class name |

$3

| Prop | Type | Required | Default | Description |
| :---------- | :----------------------- | :------- | :------ | :------------------------------------- |
| name | string | Yes | | The name of the TabItem |
| focus | boolean | No | false | Sets the focused state on the TabItem |
| disabled | boolean | No | false | Sets the disabled state on the TabItem |
| selected | boolean | No | false | Sets the selected TabItem |
| onChange | (name: string) => void | No | | The onChange event handler |
| className | string` | No | | Allows providing a custom class name |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.