Skip to main content
Since Shoelace 2.0 Code stable Pattern stable Figma ready

Tab

<sl-tab> | SlTab

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

Examples

Basic Tab

Tab Active Closable Disabled
<sl-tab>Tab</sl-tab>
<sl-tab active>Active</sl-tab>
<sl-tab closable>Closable</sl-tab>
<sl-tab disabled>Disabled</sl-tab>
sl-tab Tab
sl-tab active="true" Active
sl-tab closable="true" Closable
sl-tab disabled="true" Disabled
import SlTab from '@teamshares/shoelace/dist/react/tab';

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

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/tab/tab.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/cdn/components/tab/tab.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/tab/tab.js';

To import this component as a React component:

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

Slots

Name Description
(default) The tab’s label.

Learn more about using slots.

Properties

Name Description Reflects Type Default
panel The name of the tab panel this tab is associated with. The panel must be located in the same tab group. string ''
active Draws the tab in an active state. boolean false
closable Makes the tab closable and shows a close button. boolean false
disabled Disables the tab and prevents selection. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-close onSlClose Emitted when the tab is closable and the close button is activated. -

Learn more about events.

Methods

Name Description Arguments
focus() Sets focus to the tab. options: FocusOptions
blur() Removes focus from the tab. -

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.
close-button The close button, an <sl-icon-button>.
close-button__base The close button’s exported base part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-icon-button>