• Public
  • Public/Protected
  • All

Module @react-md/tabs


Type aliases

InitializedTabConfig: TabConfig & Required<Pick<TabConfig, "id">>
InitializedTabsManagerContext: Required<TabsManagerContext>
TabsAlignment: "left" | "center" | "right"

The supported types of alignments for the tabs.

TabsProps: Omit<TabsListProps, "activeIndex" | "onActiveIndexChange">


DEFAULT_TABPANEL_CLASSNAMES: Readonly<CSSTransitionClassNames> = ...

@since 4.0.0

DEFAULT_TABPANEL_TIMEOUT: TransitionTimeout = 150

@since 4.0.0

Tab: ForwardRefExoticComponent<TabProps & RefAttributes<HTMLButtonElement>> = ...

The Tab is a low-level component that just renders an accessible tab widget along with some general styles and an optional icon.

TabPanel: ForwardRefExoticComponent<TabPanelProps & RefAttributes<HTMLDivElement>> = ...

This component renders an accessible tab panel with enter and exit animations. This probably should only be used internally as it relies on the TabPanels component along with the TransitionGroup from react-transition-group to work as expected.

TabPanels: ForwardRefExoticComponent<TabPanelsProps & RefAttributes<HTMLDivElement>> = ...

This component allows you to control the visibility of the TabPanel components and animating the next and current panels as needed. This works by looping over all the children and getting the current TabPanel by the activeIndex. This is why the children for this component can only be TabPanel and should not be conditional.

Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>> = ...

The Tabs component is used to render all the configured tabs from the parent TabsManager component inside of the TabsList.

TabsList: ForwardRefExoticComponent<TabsListProps & RefAttributes<HTMLDivElement>> = ...

The TabsList component is the container for all the individual Tabs that should be rendered. This handles adding an active indicator underneath the active tab and animating it to the new location when a new tab becomes active. It also handles the ability update which tab is selected when it has been clicked or updated with keyboard movement.

This should probably not be used outside of this package unless a custom implementation is desired.


  • The TabsManager is used to configure your Tabs component and handle some of the default behavior such as:

    • controlling the activeIndex
    • general tab configuration
    • callbacks when the tab has changed
    • providing an id prefix for all tabs for simplicity


    Returns ReactElement

Generated using TypeDoc