Search blocks by description or jump to a page.
Pill-style segmented toggle for switching in-page views with a per-segment item count, shown in mailbox and calendar range examples.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Section Switcher is the pill-style in-page view toggle that replaces a tab bar when the views share a single content area: two example sets are shown. The mailbox switcher offers Inbox (12), Sent (48), and Drafts (3) with Inbox active and a live message list below from Priya Nair, Jordan Lee, and Marcus Kim. The calendar switcher offers Day (7), Week (34), and Month (142) with Week active and a header reading Jun 9 to Jun 15, 2026, 34 events.
Each switcher is a SegmentedSwitcher component taking a typed segments array. The count on each pill turns an abstract label into a quick triage aid.
Reach for this block inside any panel or page section where the user switches between filtered views of the same data type, wired to your view state. Keep the count live so it reflects current data, not a stale seed.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the mailbox view switcher. Other segment switcher uses:
Tip: aria-pressed on each button is the correct pattern here because the control changes the view, not the page.