Skip to main contentSkip to filter inputPrimer

UnderlinePanels

The UnderlinePanels are used to break related content into tabbed panels.

Page navigation navigation

React
experimental
Storybook|Source
Rails
ready
Docs|Lookbook|Source

Underlined panels let users switch between 2 or more related panels of content without changing the URL or leaving their current context.

If you want to use this pattern for tabs that change the URL when activated, use the UnderlineNav component instead.

React examples

Default

    With counter badges

      With leading icons

        More code examples

        The previous examples are a curated subset of the full capabilities (such as reponsive behavior) of the UnderlinePanels component. For more examples, see the UnderlinePanels Storybook stories.

        Props

        UnderlinePanels

        NameDefaultDescription
        aria-label
        string

        Accessible name for the tab list

        aria-labelledby
        string

        ID of the element containing the name for the tab list

        children Required
        Array<UnderlinePanels.Tab | UnderlinePanels.Panel>

        Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render

        id
        string

        Custom string to use when generating the IDs of tabs and aria-labelledby for the panels

        loadingCounters
        		false
        boolean

        Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift.

        sx Deprecated
        SystemStyleObject

        UnderlinePanels.Tab

        NameDefaultDescription
        aria-selected
        		false
        | boolean | 'true' | 'false'

        Whether this is the selected tab. For more information about aria-selected, see MDN.

        onSelect
        (event) => void

        The handler that gets called when the tab is selected

        counter
        number | string

        Content of CounterLabel rendered after tab text label

        icon
        Component

        Icon rendered before the tab text label

        sx Deprecated
        SystemStyleObject

        UnderlinePanels.Panel

        NameDefaultDescription
        sx Deprecated
        SystemStyleObject
        See div for more prop options

        Related links