Tabs
Tabs are interactive elements that work alongside Tab and Tab Panel to organise content into separate sections or views.
import { registerTabs, registerTab, registerTabPanel } from '@vonage/vivid';
registerTabs('your-prefix');
registerTab('your-prefix');
registerTabPanel('your-prefix');
The icon slot on the Tab component can be used to display a custom icon. If set, the icon attribute is ignored.
The action-items slot on the Tabs component can be used to add action items after the last Tab in the tabs bar.
In the example below, a Button is provided that adds a new Tab when clicked.
Use the --tabs-block-size CSS variable to set the block-size of the base element.
When using Tabs inside flex structure, setting --tabs-block-size: 100% with flex:1 or with any specific block-size on Tabs will stretch the tabs to full height.
Use the CSS part tab-panel to provide custom styling to the Tab Panel components.
| Property |
Type |
Default |
Description |
| activeid |
string |
|
Match with an `id` set on a Tab to mark it as active on initial load |
| activeindicator |
boolean |
|
Deprecated attribute. It has no effect. |
| connotation |
'accent' | 'cta' |
|
Sets the connotation color of the active tab |
| gutters |
'none' | 'small' |
|
Sets the spacing inside the Tab Panels |
| orientation |
'horizontal' | 'vertical' |
|
The orientation |
| scrollablePanel |
boolean |
|
Sets whether the Tab Panel will be scrollable (if content height exceeds `block-size`) |
| tabsLayout |
'align-start' | 'stretch' |
|
Controls the layout of the tabs. |
| Property |
Type |
Default |
Description |
|
activeid
|
string |
|
Match with an `id` set on a Tab to mark it as active on initial load |
|
activeindicator
|
boolean |
|
Deprecated attribute. It has no effect. |
|
connotation
|
'accent' | 'cta' |
|
Sets the connotation color of the active tab |
|
gutters
|
'none' | 'small' |
|
Sets the spacing inside the Tab Panels |
|
orientation
|
'horizontal' | 'vertical' |
|
The orientation |
|
scrollable-panel
|
boolean |
|
Sets whether the Tab Panel will be scrollable (if content height exceeds `block-size`) |
|
tabs-layout
|
'align-start' | 'stretch' |
|
Controls the layout of the tabs. |
| Name |
Description |
| action-items |
Slot for action items such as buttons or controls.
|
| default |
Default slot for tab and tab-panel elements.
|
| Name |
Description |
| action-items |
Slot for action items such as buttons or controls. |
| default |
Default slot for tab and tab-panel elements. |
| Event |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| change |
CustomEvent<HTMLElement> |
Fires a custom 'change' event when a tab is clicked or during keyboard navigation |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
| Name |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| change |
CustomEvent<HTMLElement> |
Fires a custom 'change' event when a tab is clicked or during keyboard navigation |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
| Name |
Params |
Returns |
Description |
| adjust |
adjustment: number
|
void
|
Adjusts the active index by numerical increments.
Only enabled tabs are considered. |
| Property |
Type |
Default |
Description |
| connotation |
'accent' | 'cta' |
|
The connotation the tab should have. |
| disabled |
boolean |
|
When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information. |
| icon |
IconId |
|
A decorative icon the custom element should have. See the [Vivid Icon
Gallery](/icons/icons-gallery/) for available icons and `icon-name`s
See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
| iconTrailing |
boolean |
|
Indicates the icon affix alignment. |
| label |
string |
|
Indicates the tab's label. |
| removable |
boolean |
|
Adds a close button |
| shape |
'rounded' | 'sharp' |
|
The shape the tab should have. |
| tabIndex |
number |
|
|
| Property |
Type |
Default |
Description |
|
connotation
|
'accent' | 'cta' |
|
The connotation the tab should have. |
|
disabled
|
boolean |
|
When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information. |
|
icon
|
IconId |
|
A decorative icon the custom element should have. See the [Vivid Icon
Gallery](/icons/icons-gallery/) for available icons and `icon-name`s
See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
|
icon-trailing
|
boolean |
|
Indicates the icon affix alignment. |
|
label
|
string |
|
Indicates the tab's label. |
|
removable
|
boolean |
|
Adds a close button |
|
shape
|
'rounded' | 'sharp' |
|
The shape the tab should have. |
|
tabindex
|
number |
|
|
| Name |
Description |
| icon |
The preferred way to add an icon to the component.
|
| Name |
Description |
| icon |
The preferred way to add an icon to the component. |
| Event |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
| Name |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
| Name |
Description |
| default |
Default slot.
|
| Name |
Description |
| default |
Default slot. |
| Event |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
| Name |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
