Tabs

Tabs organize content into separate sections within the same interface, allowing users to switch between views without navigating away from the page.

Overview

Usage

When to use this component?

Use Tabs to organize related content that is too complex to display all at once. They are ideal for settings panels, dashboards, product information pages, and any interface where users need to toggle between multiple sections within a single view.

How it works

Tabs are arranged in a row, with each tab representing a different content section. When a tab is selected, it becomes visually highlighted, and the associated content is displayed below. Only one tab's content is visible at a time, which helps keep the interface clean and manageable.

Code

Vanilla Js

<dda-tabs
    type="text"
    hover_style="dda-tab-default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="tabs"
    tab_texts='["Tab 1","Tab 2","Tab 3"]'
    ontabclick="index => alert(`Tab ${index + 1} clicked!`)"
    button_name="button"
></dda-tabs>

React

<DdaTabs
    type="text"
    hover_style="dda-tab-default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="tabs"
    tab_texts='["Tab 1","Tab 2","Tab 3"]'
    ontabclick="index => alert(`Tab ${index + 1} clicked!`)"
    button_name="button"
></DdaTabs>

Vue

<DdaTabs
    type="text"
    hover_style="dda-tab-default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="tabs"
    tab_texts='["Tab 1","Tab 2","Tab 3"]'
    ontabclick="index => alert(`Tab ${index + 1} clicked!`)"
    button_name="button"
></DdaTabs>

Angular

<dda-tabs
    type="text"
    hover_style="dda-tab-default"
    custom_class=""
    component_mode=""
    button_id="button"
    aria_label="tabs"
    tab_texts='["Tab 1","Tab 2","Tab 3"]'
    ontabclick="index => alert(`Tab ${index + 1} clicked!`)"
    button_name="button"
></dda-tabs>

Property	Description	Type
type	Defines the style of the tab. It can either be text (just the text of the tab) or text-icon (a combination of text and an icon next to the text). Defaults to 'text'.	string
hover_style	Specifies the hover style for the tabs. Options include different background or border styles that change when a tab is hovered over. Defaults to 'dda-tab-default'.	'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' | 'dda-tab-underline-filled'
border_bottom	Determines whether a border is shown at the bottom of the tab. Defaults to false, meaning no border is added.	boolean
custom_class	Allows the user to apply custom CSS classes to the tabs container for additional styling. Defaults to an empty string (no custom class).	string
component_mode	Optionally defines a mode for the component ('light' or 'dark'), which could be used for conditional styling or behavior. Defaults to 'light'.	string
button_id	An optional ID that can be applied to the button elements of the tabs. Useful for targeting the tabs with specific JavaScript or CSS.	string
aria_label	Defines an accessible label for the tab buttons, improving accessibility by describing the purpose of the buttons for screen readers.	string

Anatomy

Anatomy Options

Active Tab: The currently selected tab, visually distinct to indicate that it is in focus or currently being viewed.

Inactive Tab: Tabs that are not selected, styled to show that they are not active, often with a more muted appearance.

Badge: A small label, often numerical, indicating additional information related to the tab, such as notifications or counts.

Lead-Icon: An icon placed before the tab text to visually represent the content or functionality associated with the tab.

Label: The text descriptor of the tab, providing a clear indication of the tab's purpose or content.

Dos and Don'ts

Dos	Don'ts
Use clear, concise labels for each tab to improve user understanding.	Don’t overload the interface with too many tabs; keep it manageable, ideally with 4-6 tabs or fewer.
Ensure a distinct visual indicator for the active tab, such as a color or underline.	Don’t rely solely on color to indicate the active tab; consider adding an underline for accessibility.
Keep tabs within the same content category or closely related topics.	Don’t use tabs to display drastically different content types that may confuse users.
Place tabs at the top of the content section so they’re easily accessible.	Don’t place tabs where users must scroll to see them; ensure they are visible without extra effort.