Tabs

Tabs are used for organizing information by showing one section while hiding other related sections at the same time. Tabs can be oriented either horizontally or vertically. In both cases, the content for the active Tab must be wrapped in a TabPanel.

Vertical tabs on a case present critical data, relevant discussions, unique views of data, or fundamentally linked case relationships such as child cases and dependencies. Additionally, they may also show key bits of metadata around the internal content if desired, such as counts of items or key performance indicators.

  • Avoid nesting tabs whenever possible (never have tabs within tabs within the same content section).
  • Only show read-only information within tabs (no data entry).
  • Tabs within a card are easier to understand and manage. Use header levels to distinguish information under a tab.
  • Limit number of tabs to 7 or less to avoid information overload.

If the Tabs appear over a dark background, pass the inverted prop so that the Tab text will appear white.

Tabs can also contain a Count Badge if the count attribute is provided with a number.