@highlight-ui/tab

Using npm:

npm install @highlight-ui/tab

Using yarn:

yarn add @highlight-ui/tab

Using pnpm:

pnpm install @highlight-ui/tab

In your (S)CSS file:

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

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

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

Usage

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

export default function TabExample() {
  return (
    <Tab value={value} onChange={handleChange}>
      <TabItem name="lorem">Lorem</TabItem>
      <TabItem name="ipsum">Ipsum</TabItem>
    </Tab>
  );
}

Props 📜

Tab

| 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 |

TabItem

| 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.