Tabs

A group of connected buttons that lets users select a single option from a set. Useful for toggling between views, filters, or modes.

Install

Run the following command to install the tabs component:

npx acc-nuxt add Tabs

Examples

Default

When the prop isLink is true, then the tabs component will automatically select the current page when mounted if it is present in the list given to options.

HomeComponentsTabsComposablesBlocksPages

Disabled

Controlled

Use v-model to read and set the selected value from outside the component.

Selected: month

Props

options:AccTabsOption[]
Array of options. Each option needs a unique value and a display label.
modelValue:string— optional
default:undefined
The currently selected value. Use v-model to bind.
disabled:boolean— optional
default:false
When true, the entire control is non-interactive.
isLink:boolean— optional
default:false
When true, renders each option as a NuxtLink using option.to.

CSS Variables

Customize the tabs by overriding these CSS variables on the .lev-tabs class.

--lev-tabs-bg
default:transparent
Background color of the container track.
--lev-tabs-padding
default:0px
Padding inside the tabs container.
--lev-tabs-gap
default:12px
Gap between tabs.
--lev-tabs-border-radius
default:0px
Border radius of the tabs container.
--lev-tabs-disabled-opacity
default:0.5
Opacity when the control is disabled.
--lev-tabs-item-bg
default:transparent
Background color of an inactive tab.
--lev-tabs-item-color
default:#858787
Text color of an inactive tab.
--lev-tabs-item-border-width
default:0px 0px 2px 0px
Border width of each tab.
--lev-tabs-item-border-style
default:solid
Border style of each tab.
--lev-tabs-item-border-color
default:transparent
Border color of each tab.
--lev-tabs-item-border-radius
default:0px
Border radius of each tab.
--lev-tabs-item-padding
default:10px 12px 8px 12px
Padding inside each tab.
--lev-tabs-item-font-size
default:14px
Font size of the tab label.
--lev-tabs-item-font-weight
default:400
Font weight of the tab label.
--lev-tabs-item-line-height
default:18px
Line height of the tab label.
--lev-tabs-item-hover-color
default:#141414
Text color of a tab on hover.
--lev-tabs-item-active-bg
default:transparent
Background color of the active tab.
--lev-tabs-item-active-color
default:#141414
Text color of the active tab.
--lev-tabs-item-active-hover-color
default:#141414
Text color of the active tab on hover.
--lev-tabs-item-active-border-color
default:#141414
Border color of the active tab.
--lev-tabs-item-focus-outline
default:1px solid #1d66bf
Outline style when a tab is focused.
--lev-tabs-item-focus-outline-offset
default:1px
Outline offset when a tab is focused.
--lev-tabs-item-transition
default:background-color 150ms ease-out, color 150ms ease-out, border 150ms ease
Transition applied to background, color and border changes.

On This Page