Tabs

Tabs are used for organizing information by showing one section while hiding other related sections at the same time.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

Tabs can be rendered as one of two types: horizontal and vertical. The Tabs component expects a list of tab props, where each tab can define its own href, name, and an id that is used to send back when a user interacts with the tab via the onTabClick callback function. The currentTabId prop indicates which tab is currently active, and applies special styling to it.

Individual Tabs may be marked as disabled.

Tabs may also contain a Count badge if provided with a number for the tab's count attribute.

NameTypeDefaultDescription
currentTabId*stringThe currentTabId tells the tab list which Tab should be active.
tabs*Tab[][] An array of Tab data used to render the individual tabs.
classNamestringAdditional CSS classes.
onTabClick
(id: string, event: MouseEvent<HTMLButtonElement |HTMLAnchorElement>) => void 
The onTabClick will take a callback function that is called every time a new tab is clicked and returns an id as well as the click event.
type
'horizontal' |'vertical' 
"horizontal" The type handles what direction the tabs will be rendered in.

You can override the styles of the Tabs component by setting a custom theme on the Configuration component.

{
        •         foreground: 'base.palette.interactive' // → base.palette.interactive
        •       },
        •         foreground: 'base.palette.primary-background' // → base.palette.primary-background
        •       }
      •     }
    •   }
}