Tabs

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

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

Usage

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, as well as contain errors.

Example

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Count

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

Example

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Tab 5 content

Related components

Properties

NameDescriptionDefaultType
currentTabId*The currentTabId tells the tab list which Tab should be active.string
tabs*An array of Tab data used to render the individual tabs.[]Tab[]
classNameAdditional CSS classes.string
invertedHandles the color scheme of the tabs, the inverted type is for tabs on a dark background.falseboolean
onTabClick
(id: string, event: MouseEvent<HTMLAnchorElement |HTMLButtonElement, MouseEvent>) => void 
typeThe type handles what direction the tabs will be rendered in."horizontal"
'horizontal' |'vertical' 

Custom theming

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

Example

Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Tab 5 content

Theme properties

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