PillTabs

Overview

PillTabs are horizontal navigation buttons within panels. They switch between frequently used filters or sub-views of the same content.

When to use:

To switch between different views or filters of data within a table.
To switch between different variants of content.

Implementation

Edit the code below to see your changes live!

Props

Prop name	Type	Default	Description
`activePills`	`string[]`		The currently active pill ids as an array of strings.
`items` *	`PillTabItem[] \| PillTabItemGroup[]`		Accepts either a flat array of PillTabItem or an array of PillTabItemGroup for grouped pills with visual separators.
`onPillClick` *	`(itemId: string) => void`		Function that will get called when a pill tab is clicked.
`dropdownItems`	`Array<DropdownItem \| DropdownLinkItem> \| Array<DropdownItemGroup>`		See the Dropdown component for usage.
`dropdownMaxWidth`	`number`		Forwarded to the overflow Dropdown as `maxWidth`. Caps the overflow menu width (in px) and wraps long pill titles instead of letting them overflow.

Props ending with * are required

Do's and Don'ts

Do
Use on pages that have a large amount of content.
Be concise on the navigation labels, ideally one or two words rather than a phrase.
Default page view should have no `PillTabs` selected.

Don't
Don’t use to navigate between unrelated items.
Don’t link to content that’s hidden in default view.
Never use `PillTabs` to navigate a user away from the current page.