Tabs

Default

JavaScript keeps only the active tab tabbable. Left/Right move; Home/End jumps to the first or last enabled tab.

CSS Variables

Override these variables on the component or an ancestor.

--tabs-bg-color: transparent;
--tabs-border-width: var(--border-width);
--tabs-border-color: var(--border-color);
--tab-color: var(--text-color);
--tab-bg-color: transparent;
--tab-hover-color: var(--action-color);
--tab-hover-bg-color: var(--bg-surface-hover);
--tab-active-color: var(--action-color);
--tab-active-bg-color: transparent;
--tab-active-border-color: var(--tab-active-color);
--tab-border-width: 2px;
--tab-border-color: transparent;
--tab-padding-y: var(--spacer-3);
--tab-padding-x: var(--spacer-4);
--tab-disabled-text-color: var(--disabled-text-color);
--tab-disabled-bg-color: transparent;
--tab-disabled-border-color: transparent;
--tab-focus-outline-width: var(--focus-outline-width);
--tab-focus-outline-style: var(--focus-outline-style);
--tab-focus-outline-color: var(--focus-outline-color);
--tab-focus-outline-offset: calc(-1 * var(--tab-focus-outline-width));
--tab-transition-duration: var(--transition-duration);
--tab-transition-easing: var(--transition-easing);
--tab-content-bg-color: var(--bg-surface);
--tab-content-padding: var(--spacer-3);
--tab-content-transition-duration: var(--transition-duration);
--tab-content-transition-easing: var(--transition-easing);