Tabs are a UI component used for organizing information by showing one grouping of information while hiding other related items at the same time.

tabs enabled


In Pega's new UI architecture, this component is utilized within Panels.

Some quick things to follow when using tabs:

  • Never nest tabs (never have tabs within tabs within the same content section).
  • Only show read-only information within tabs (no data entry).
  • Everything underneath the tab group belongs to the active tab, and the tabs should fall on the grey background.
  • Tabs in a single card design are easier to understand and manage. Use header levels to distinguish information under a tab.
  • Limit number of tabs to 7 or less.
example of tabs in the Summary Panel

Last updated: Dec 2019