This is Tab component in Highlight UI
npm install @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';
`tsx
import React from 'react';
import { Tab, TabItem } from '@highlight-ui/tab';
export default function TabExample() {
return (
);
}
`
| 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 |
| 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 |
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.