Tab

<sl-tab> | SlTab

Since 2.0

stable

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

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>

Additional demonstrations can be found in the tab group examples.

Slots

Name	Description
(default)	The tab’s label.

Learn more about using slots.

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

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

Learn more about events.

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

Learn more about methods.

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.

This component automatically imports the following dependencies.