Tab Title | Calcite Design System | Esri Developer

Child component of Tabs

API reference

Properties

Property	Attribute	Description	Type	Default
closable	closable	When `true`, displays a close button in the component.	`boolean`	`false`
closed	closed	When `true`, hides the component.	`boolean`	`false`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
iconEnd	icon-end	Specifies an icon to display at the end of the component.	`IconName`
iconFlipRtl	icon-flip-rtl	Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).	`FlipContext`
iconStart	icon-start	Specifies an icon to display at the start of the component.	`IconName`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
position	position	Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. @internal	`TabPosition`	`"top"`
selected	selected	When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent.	`boolean`	`false`
tab	tab	Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`.	`string`

Slots

Name	Description
default (unnamed)	A slot for adding text.

Styles

Name	Description
--calcite-tab-text-color	Specifies the component's text color.
--calcite-tab-text-color-press	Specifies the component's text color when hovered, pressed, or selected.
--calcite-tab-border-color	Specifies the component's border color.
--calcite-tab-background-color	Specifies the component's background color.
--calcite-tab-background-color-hover	When `calcite-tabs` is `bordered`, specifies the component's background color when hovered.
--calcite-tab-accent-color-press	When `selected` or active, specifies the component's accent color.
--calcite-tab-icon-color-start	Specifies the component's `iconStart` color.
--calcite-tab-icon-color-start-press	When `selected`, hovered, or pressed, specifies the component's `iconStart` color.
--calcite-tab-icon-color-end	Specifies the component's `iconEnd` color.
--calcite-tab-icon-color-end-press	When `selected`, hovered, or pressed, specifies the component's `iconEnd` color.
--calcite-tab-close-icon-color	Specifies the component's close element icon color.
--calcite-tab-close-icon-color-press	Specifies the component's close element icon color when hovered, focused, and active.
--calcite-tab-close-icon-background-color	Specifies the component's close element icon background color.
--calcite-tab-close-icon-background-color-press	Specifies the component's close element icon background color when pressed.
--calcite-tab-close-icon-background-color-hover	Specifies the component's close element icon background color when hovered.

Events

Name	Description	Behavior
calciteTabsActivate	Fires when a `calcite-tab` is selected.	bubblescomposed
calciteTabsClose	Fires when a `calcite-tab` is closed.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
getTabIndex	Returns the index of the title within the `calcite-tab-nav`.	`getTabIndex(): Promise<number>`