View in Storybook
Anatomy
Tabs are typically a secondary navigation method within a page. They contain similar charataristics to a Button but do not perform the same purpose.
- iconLeft (optional): To support a tab label's context.
- Text: Label or title of tab.
- iconRight (optional): Commonly used when a tab is directing consumers in a particular direction or away from a page. Use carefully.
- Badge (optional): To help if there is any new or unread content inside a tab.
Types
States
Tabs share the same statuses as other action components in the design system. We do not support errors and although not often needed, the addition of a disabled state helps maintain continuity.
Tab Group
Instead of structing separate tabs together, consumers can use the TabGroup variant to show or hide a string of tabs. We suggest using a minimum of 2 and a maximum of 8 tabs per group to manage cognitive load.
Any group of tabs can be configured to be left aligned or full width to fill any space. These are provided in Modals and other larger component patterns by default for consumers to display.
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
In-page
When using TabGroup within a page, always use the left aligned variant so there is not large gaps between individual tabs.
Drawer
As the drawer has a more narrow fixed width, the TabGroup can use the filled variant.
Best practice
- Used as a secondary navigation method.
- When there is a large volume of content on any page that needs to be contained in a digestiable way.
- To switch between different but related views.
- For organizing and grouping related content on a page.
- Content within Tabs is informed from the main parent page in which they are placed.
- Only use the Tiny badge in Tabs for notification signifying. We recommend using the Danger Bold variant
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Keep Tab labels concise, ideally one to two words. |
🚫 Truncate labels in Tabs. Consider a different word(s) |
|
✅ Use a Badge to signify a notification or alert to content inside any given tab |
🚫 Use Tabs to filter content. Our ButtonGroup is the component for this purpose |
|
|
🚫 Use Tabs to navigate to other pages. Use navigation or links instead. |
Also see