Section Switcher
Pill-style segmented toggle for switching in-page views with a per-segment item count, shown in mailbox and calendar range examples.
Pill-style segmented toggle for switching in-page views with a per-segment item count, shown in mailbox and calendar range examples.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? 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.