@stihl-design-system/components/components/Tabs/Tabs.d.ts

Welcome to the STIHL Design System react component library.

import { HTMLAttributes, JSX } from 'react';
import { IconName } from '../../types';
import { TabsAlignment } from './Tabs.utils';
export interface Tab {
    /** Content displayed when the Tab is active. */
    content: React.ReactNode;
    /** Unique id for the Tab. */
    id: string;
    /** Label text displayed on the Tab. */
    label: string;
    /** Name of the icon to display */
    iconName?: IconName;
    /** Number Indicator value displayed next to the label. */
    numberIndicatorValue?: string;
}
export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
    /** Unique id for the tab list. */
    id: string;
    /** An array of Tab Objects containing the id, content, label, and other optional parameters.
     *  `{ content: React.ReactNode;`
     *  `id: string;`
     *  `label: string;`
     *  `iconName?: IconName;`
     *  `numberIndicatorValue?: string; }[]`
     */
    tabs: Tab[];
    /** Index of the tab that should be active. */
    activeTabIndex?: number;
    /** Alignment of the Tabs.
     * @default 'left'
     */
    alignment?: TabsAlignment;
    /**
     * Additional class name to apply to the tab pane.
     */
    classNameTabPane?: string;
    /** Index of the tab to be selected when Tabs are rendered the first time in **uncontrolled DSTabs** component.
     * @default 0
     * */
    defaultSelectedTabIndex?: number;
    /** Callback function called when the selected tab changes. */
    onTabChange?: (selectedTabIndex: number) => void;
}
/**
 * A component for organizing content into tabbed sections, allowing users to navigate between them.
 * Supports single selection to maintain focus on one content area at a time.
 * Avoid excessive tabs to prevent overwhelming the user.
 *
 * Design in Figma: [Tabs](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=24564-313&t=UBsmFURFENnuYSW1-11)
 */
export declare const DSTabs: ({ id: tabListId, tabs, activeTabIndex, alignment, className, classNameTabPane, defaultSelectedTabIndex, onTabChange, ...rest }: TabsProps) => JSX.Element;