shoelace/docs/components/tab.md

Tab

[component-header:sl-tab]

Tabs are used inside tab groups to represent and activate tab panels.

<sl-tab>Tab</sl-tab>
<sl-tab active>Active</sl-tab>
<sl-tab closable>Closable</sl-tab>
<sl-tab disabled>Disabled</sl-tab>

import { SlTab } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <SlTab>Tab</SlTab>
    <SlTab active>Active</SlTab>
    <SlTab closable>Closable</SlTab>
    <SlTab disabled>Disabled</SlTab>
  </>
);

?> Additional demonstrations can be found in the tab group examples.

[component-metadata:sl-tab]