Tabs

Tabs are used as a form of navigation within the same context, allowing the user to alternate between views that provide different information. A count badge can also be used in a tab.

Tabs

<tk-tabs-container>
  <tk-tabs>
    <tk-tab-button tab-selected="yourFunction()" tab-title="Gringotts" badge-type="light" badge-text="75"></tk-tab-button>
    <tk-tab-button is-active="true" tab-title="The Leaky Cauldron"></tk-tab-button>
    <tk-tab-button tab-title="Disabled Tab" disabled></tk-tab-button>
    <tk-tab-divider></tk-tab-divider>
    <tk-tab-link tab-title="Flourish & Blotts" url="https://www.pottermore.com/"></tk-tab-link>
  </tk-tabs>
</tk-tabs-container>

Description

Tab children can either be <tk-tab-button> or <tk-tab-link>. Most likely, you’ll want to use the button.

Vertical Tabs

subheader

second subheader

<tk-tabs-container>
  <tk-tabs vertical="true">
    <tk-tab-subheader>subheader</tk-tab-subheader>
    <tk-tab-button tab-selected="yourFunction()" tab-title="Gringotts" badge-type="light" badge-text="75"></tk-tab-button>
    <tk-tab-button tab-title="The Leaky Cauldron1"></tk-tab-button>
    <tk-tab-divider vertical></tk-tab-divider>
    <tk-tab-subheader>second subheader</tk-tab-subheader>
    <tk-tab-button tab-title="The Leaky Cauldron2"></tk-tab-button>
    <tk-tab-button tab-title="Disabled Tab" disabled></tk-tab-button>
  </tk-tabs>
</tk-tabs-container>

Description

Tab children can either be <tk-tab-button> or <tk-tab-link>. Most likely, you’ll want to use the button.
<tk-tab-subheader> is currently only for vertical tabs.

Position: Center or Right

<tk-tabs-container>
  <tk-tabs position="center">
    <tk-tab-button tab-title="Borgin & Burkes"></tk-tab-button>
    <tk-tab-button tab-title="Honeydukes"></tk-tab-button>
  </tk-tabs>
</tk-tabs-container>

Description

This sets the alignment of the tabs. The default is aligned to the left.

Props

Property	Default	Description
`disabled`	`false`	Disables the button or link.
`position`	`left`	Aligns the tab to the `left`, `center`, or `right`.
`tabTitle`	`''`	String that sets the label of a tab.
`url`	`''`	The href for a `tk-tab-link`.
`isActive`	`false`	Boolean for setting the active state of a tab. The first tab sets isActive to true if all other tabs are unset.
`badgeText`	`''`	String for including a `tk-badge` count. If left off, no badge will be rendered.
`badgeType`	`light`	String for the type of `tk-badge`.
`vertical`	`false`	Tabs will be arranged vertically.

Events

Name	Description
`tabSelected`	Fired any time a `tk-tab-button` is selected. This allows you to show a tab, or fire a tracking event.

Do

Ensure there is always one active tab

Don't

Add a background behind the tab
Change the tab color or border

Accessibility

Receives :focus
aria-selected should be true when in focus and false when not