Pill Tabs
Tabs shaped as rounded pills with a filled background on the active one. Ideal for filter bars and segmented controls that toggle between a few short views.
Tabs shaped as rounded pills with a filled background on the active one. Ideal for filter bars and segmented controls that toggle between a few short views.
Search blocks by description or jump to a page.
Pill Tabs renders a horizontal row of rounded triggers followed by a bordered content panel. Each trigger sits in a muted pill shape, and clicking one fills it with the primary color while the panel below swaps to the matching content area with a heading and a short description. The three demo tabs are Account, Password, and Settings, arranged left to right with the Account tab active by default.
The trigger row and each panel are fully independent. You can rename the tabs, add or remove triggers, and rewrite the heading and body copy inside each panel without affecting the others. The pill shape comes from the trigger styling, so the same pattern scales cleanly from two tabs to five or six before wrapping becomes a concern.
Reach for this block when you need a compact segmented control that feels at home in a conversational or assistant interface. AI products often present a small set of modes, such as Chat, History, and Settings, where the switcher should feel tactile and easy to read at a glance. Pill triggers read faster than underline tabs at small sizes and carry more visual weight than plain text links, making the active state clear even when the surrounding UI is dense.
A natural flow around it on a Components page:
Before
After
The block adapts to most segmented control needs with straightforward copy changes:
Tip: keep each label to one or two short words so the pill row stays on a single line and the active state reads clearly at a glance.