Tab

Tab component is a web component that displays a tabbed interface. It can be used to switch between different sections of content.

Design system docs Examples Default tab

Tab items must be used with the dap-ds-tab-group component. The dap-ds-tab component is used to create a tab. The tabId attribute is used to identify the tab and it is mandantory. The content of the tab is placed inside the content slot.

<dap-ds-tab-group>
<dap-ds-tab tabId="first">
  Tab 1
  <div slot="content">
    Content 1
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Second">
  Tab 2
  <div slot="content">
    Content 2
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Third">
  Tab 3
  <div slot="content">
    Content 3
  </div>
</dap-ds-tab>
</dap-ds-tab-group>
Custom tab

Tabs can be customized with icons or other components. It can accept any component as a child.

<dap-ds-tab-group>
<dap-ds-tab tabId="first">
  <dap-ds-stack direction="row">
    <dap-ds-icon name="home-6-line"></dap-ds-icon>
    Home
  </dap-ds-stack>
  <div slot="content">
    Content 1
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Second">
  Tab 2
  <div slot="content">
    Content 2
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Third" disabled>
  Tab 3
  <div slot="content">
    Content 3
  </div>
</dap-ds-tab>
</dap-ds-tab-group>
Sizes

Tabs can be small or large. Default size is sm

<dap-ds-stack>
<dap-ds-tab-group size="sm">
  <dap-ds-tab tabId="first">
    Tab 1
    <div slot="content">
      Content 1
    </div>
  </dap-ds-tab>
  <dap-ds-tab tabId="Second">
    Tab 2
    <div slot="content">
      Content 2
    </div>
  </dap-ds-tab>
  <dap-ds-tab tabId="Third">
    Tab 3
    <div slot="content">
      Content 3
    </div>
  </dap-ds-tab>
</dap-ds-tab-group>
<dap-ds-tab-group size="lg">
  <dap-ds-tab tabId="first">
    Tab 1
    <div slot="content">
      Content 1
    </div>
  </dap-ds-tab>
  <dap-ds-tab tabId="Second">
    Tab 2
    <div slot="content">
      Content 2
    </div>
  </dap-ds-tab>
  <dap-ds-tab tabId="Third">
    Tab 3
    <div slot="content">
      Content 3
    </div>
  </dap-ds-tab>
</dap-ds-tab-group>
</dap-ds-stack>
Mobile

Tabs can be stacked on mobile devices with the mobile attribute.

<dap-ds-tab-group mobile>
<dap-ds-tab tabId="first">
  Tab 1
  <div slot="content">
    Content 1
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Second">
  Tab 2
  <div slot="content">
    Content 2
  </div>
</dap-ds-tab>
<dap-ds-tab tabId="Third">
  Tab 3
  <div slot="content">
    Content 3
  </div>
</dap-ds-tab>
</dap-ds-tab-group>
Importing 
import { DapDSTab } from 'dap-design-system'
Importing React 
import { DapDSTabReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSTab } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
tabIdstringThe tab id. Required
disabledbooleanfalseThe disabled state of the tab.
Slots
NameDescription
(default)The tab title template.
contentThe tab content.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main tab content container.
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-tab::part(base) {
  /* Your custom styles */
}

Example usage:

<dap-ds-tab class="my-custom-dap-ds-tab">
  Tab
</dap-ds-tab>

.my-custom-dap-ds-tab::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

 CSS Custom Properties

No CSS custom properties available.

Components Tab group <dap-ds-tab-group/> Attributes
PropertyTypeDefaultDescription
selectedTabIdstringThe selected tab id.
size'sm', 'lg''sm'The size of the tab buttons. Default is sm. Can be sm or lg.
mobilebooleanfalseIf true, the tab group will be displayed in mobile mode.
Slots
NameDescription
(default)The tab items.
Events
Event NameDescriptionType
dds-tab-selectFired when select a new tab.void
CSS Parts
Part NameDescription
baseThe main container.
tab-navThe tab navigation container.
tab-contentThe tab content container.
CSS Custom Properties
Property NameDescription
--dds-tab-group-border-radiusBorder radius of the tab group container
--dds-tab-group-border-widthBorder width of the tab navigation
--dds-tab-group-border-colorBorder color of the tab navigation
--dds-tab-height-smHeight of small tabs
--dds-tab-height-lgHeight of large tabs
--dds-tab-font-size-smFont size of small tabs
--dds-tab-font-size-lgFont size of large tabs
--dds-tab-paddingPadding of the tab buttons
--dds-tab-border-widthBorder width for tabs
--dds-tab-selected-border-colorBorder color for selected tabs
--dds-tab-text-colorText color for tabs
--dds-tab-hover-text-colorText color for tabs on hover
--dds-tab-disabled-text-colorText color for disabled tabs
--dds-tab-hover-backgroundBackground color for tabs on hover
--dds-tab-active-backgroundBackground color for active tabs