Interface TabsProps

Props for the Tabs component.

interface TabsProps {
    activeColor?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    backgroundColor?: | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg";
    defaultValue?: number;
    id?: string;
    labeledBy?: string;
    selectedIndicator?: boolean;
    sx?: SxProps<Theme>;
    tabList?: {
        disabled?: boolean;
        icon?: string | ReactElement<unknown, string>;
        label: string;
        value?: null | string | number | boolean;
    }[];
}

Hierarchy

  • TabsProps
    • TabsProps

Properties

activeColor? backgroundColor? defaultValue? id? labeledBy? selectedIndicator? sx? tabList?

Properties

OptionalactiveColor

activeColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

Active color for the selected tab.

OptionalbackgroundColor

backgroundColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

Background color for the tabs container.

OptionaldefaultValue

defaultValue?: number

Default selected tab index.

Optionalid

id?: string

Unique identifier for the tabs component.

OptionallabeledBy

labeledBy?: string

The aria-labelledby reference ID for accessibility.

OptionalselectedIndicator

selectedIndicator?: boolean

Whether to show the default MUI tab indicator. If false, no indicator will be displayed.

Default

true

Optionalsx

sx?: SxProps<Theme>

MUI system-style sx prop with theme-aware parsing support.

OptionaltabList

tabList?: {
    disabled?: boolean;
    icon?: string | ReactElement<unknown, string>;
    label: string;
    value?: null | string | number | boolean;
}[]

List of tabs to render with labels and optional icons.

Settings

Member Visibility

On This Page

Properties