segmented-control component
Drop-in semantic component. See examples, sizes, variants, and source.
A styled radio-button group built from a segmented-control
container with segment children, where exactly one carries
active. Layer modifiers for size, color, density
(compact, icon-only), shape
(pills, basic,
outline), and orientation
(vertical, fluid,
responsive). Selection is plain HTML — wire it up with the
on click handlers from the BlueStack framework or by powering it
through segmented-control.js.
Segmented Control
Basic Segmented Control
Overview
Details
Activity
Settings
All
Active
Completed
<div class="stack">
<div class="segmented-control">
<button class="segment active">Overview</button>
<button class="segment">Details</button>
<button class="segment">Activity</button>
<button class="segment">Settings</button>
</div>
<div class="segmented-control">
<button class="segment active">
<span>All</span>
<span class="footnote text-gray-500">123</span>
</button>
<button class="segment">
<span>Active</span>
<span class="footnote text-gray-500">89</span>
</button>
<button class="segment">
<span>Completed</span>
<span class="footnote text-gray-500">34</span>
</button>
</div>
</div>
Size Variants
Tiny
Option 2
Option 3
Small
Option 2
Option 3
Default
Option 2
Option 3
Large
Option 2
Option 3
Big
Option 2
Option 3
<div class="stack">
<div class="segmented-control xs">
<button class="segment active">Tiny</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control sm">
<button class="segment active">Small</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control">
<button class="segment active">Default</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control xl">
<button class="segment active">Large</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control lg">
<button class="segment active">Big</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
</div>
Semantic Color Variants
Default
Option 2
Option 3
Primary
Option 2
Option 3
Positive
Option 2
Option 3
Negative
Option 2
Option 3
Warning
Option 2
Option 3
Info
Option 2
Option 3
<div class="stack">
<div class="segmented-control">
<button class="segment active">Default</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control primary">
<button class="segment active">Primary</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control positive">
<button class="segment active">Positive</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control negative">
<button class="segment active">Negative</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control warning">
<button class="segment active">Warning</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control info">
<button class="segment active">Info</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
</div>
Extended Color Palette
Red
Option 2
Option 3
Orange
Option 2
Option 3
Yellow
Option 2
Option 3
Green
Option 2
Option 3
Teal
Option 2
Option 3
Blue
Option 2
Option 3
Violet
Option 2
Option 3
Purple
Option 2
Option 3
Pink
Option 2
Option 3
Brown
Option 2
Option 3
Grey
Option 2
Option 3
Black
Option 2
Option 3
<div class="stack">
<div class="segmented-control red">
<button class="segment active">Red</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control orange">
<button class="segment active">Orange</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control yellow">
<button class="segment active">Yellow</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control green">
<button class="segment active">Green</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control teal">
<button class="segment active">Teal</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control blue">
<button class="segment active">Blue</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control violet">
<button class="segment active">Violet</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control purple">
<button class="segment active">Purple</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control pink">
<button class="segment active">Pink</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control brown">
<button class="segment active">Brown</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control grey">
<button class="segment active">Grey</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control black">
<button class="segment active">Black</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
</div>
Segmented Control with Icons
Icons with Text
Grid
List
Cards
Home
Profile
Settings
Notifications
<div class="stack">
<div class="segmented-control">
<button class="segment active">
<i class="icon grid-3x3 w-4 h-4"></i>
<span>Grid</span>
</button>
<button class="segment">
<i class="icon list w-4 h-4"></i>
<span>List</span>
</button>
<button class="segment">
<i class="icon layout-dashboard w-4 h-4"></i>
<span>Cards</span>
</button>
</div>
<div class="segmented-control primary">
<button class="segment active">
<i class="icon house w-4 h-4"></i>
<span>Home</span>
</button>
<button class="segment">
<i class="icon user w-4 h-4"></i>
<span>Profile</span>
</button>
<button class="segment">
<i class="icon settings w-4 h-4"></i>
<span>Settings</span>
</button>
<button class="segment">
<i class="icon bell w-4 h-4"></i>
<span>Notifications</span>
</button>
</div>
</div>
Icon Only
<div class="stack">
<div class="segmented-control icon-only">
<button class="segment active" aria-label="Grid view">
<i class="icon grid-3x3 w-5 h-5"></i>
</button>
<button class="segment" aria-label="List view">
<i class="icon list w-5 h-5"></i>
</button>
<button class="segment" aria-label="Gallery view">
<i class="icon layout-grid w-5 h-5"></i>
</button>
<button class="segment" aria-label="Card view">
<i class="icon square w-5 h-5"></i>
</button>
</div>
<div class="segmented-control icon-only positive">
<button class="segment active" aria-label="Bold">
<i class="icon bold w-5 h-5"></i>
</button>
<button class="segment" aria-label="Italic">
<i class="icon italic w-5 h-5"></i>
</button>
<button class="segment" aria-label="Underline">
<i class="icon underline w-5 h-5"></i>
</button>
<button class="segment" aria-label="Strikethrough">
<i class="icon strikethrough w-5 h-5"></i>
</button>
</div>
</div>
Layout Variations
Fluid Width
First
Second
Third
Fourth
<div class="segmented-control fluid">
<button class="segment active">First</button>
<button class="segment">Second</button>
<button class="segment">Third</button>
<button class="segment">Fourth</button>
</div>
Vertical Orientation
Dashboard
Analytics
Reports
Team
Settings
<div class="segmented-control vertical" style="width: 200px">
<button class="segment active">
<i class="icon layout-dashboard w-4 h-4"></i>
<span>Dashboard</span>
</button>
<button class="segment">
<i class="icon chart-bar w-4 h-4"></i>
<span>Analytics</span>
</button>
<button class="segment">
<i class="icon file-text w-4 h-4"></i>
<span>Reports</span>
</button>
<button class="segment">
<i class="icon users w-4 h-4"></i>
<span>Team</span>
</button>
<button class="segment">
<i class="icon settings w-4 h-4"></i>
<span>Settings</span>
</button>
</div>
Compact Style
All
Open
Closed
Day
Week
Month
Year
<div class="stack">
<div class="segmented-control compact">
<button class="segment active">All</button>
<button class="segment">Open</button>
<button class="segment">Closed</button>
</div>
<div class="segmented-control compact primary">
<button class="segment active">Day</button>
<button class="segment">Week</button>
<button class="segment">Month</button>
<button class="segment">Year</button>
</div>
</div>
Style Variations
Pills Style
All
Active
Completed
Photos
Videos
Documents
<div class="stack">
<div class="segmented-control pills">
<button class="segment active">All</button>
<button class="segment">Active</button>
<button class="segment">Completed</button>
</div>
<div class="segmented-control pills primary">
<button class="segment active">
<i class="icon image w-4 h-4"></i>
<span>Photos</span>
</button>
<button class="segment">
<i class="icon video w-4 h-4"></i>
<span>Videos</span>
</button>
<button class="segment">
<i class="icon file w-4 h-4"></i>
<span>Documents</span>
</button>
</div>
</div>
Basic Style
All
Active
Completed
Overview
Details
Activity
<div class="stack">
<div class="segmented-control basic">
<button class="segment active">All</button>
<button class="segment">Active</button>
<button class="segment">Completed</button>
</div>
<div class="segmented-control basic primary">
<button class="segment active">Overview</button>
<button class="segment">Details</button>
<button class="segment">Activity</button>
</div>
</div>
Outline Style
Option 1
Option 2
Option 3
Approved
Pending
Rejected
<div class="stack">
<div class="segmented-control outline">
<button class="segment active">Option 1</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
<div class="segmented-control outline positive">
<button class="segment active">Approved</button>
<button class="segment">Pending</button>
<button class="segment">Rejected</button>
</div>
</div>
States and Interactions
Disabled Segments
Available
Unavailable
Pending
Locked
<div class="segmented-control">
<button class="segment active">Available</button>
<button class="segment" disabled>Unavailable</button>
<button class="segment">Pending</button>
<button class="segment" disabled>Locked</button>
</div>
With Data Values
Day
Week
Month
Year
Selected: day
<div class="stack">
<div class="segmented-control" id="time-control">
<button class="segment active" data-value="day">Day</button>
<button class="segment" data-value="week">Week</button>
<button class="segment" data-value="month">Month</button>
<button class="segment" data-value="year">Year</button>
</div>
<p class="subhead text-gray-600">
Selected: <span id="selected-time" class="font-mono bg-gray-100 px-2 py-1 rounded">day</span>
</p>
</div>
Loading State
Loading...
Option 2
Option 3
<div class="segmented-control">
<button class="segment active">
<i class="icon loader animate-spin w-4 h-4"></i>
<span>Loading...</span>
</button>
<button class="segment">Option 2</button>
<button class="segment">Option 3</button>
</div>
Interactive Example
View Switcher
Chart
Table
List
Calendar
Table View
Name
Value
Status
Product A
$1,234
Active
Product B
$2,345
Pending
List View
Quarterly Report
Growth Analysis
Security Audit
Calendar View
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
1
2
3
4
5
6
<div class="stack">
<div class="segmented-control primary" id="view-switcher">
<button class="segment active" data-view="chart">
<i class="icon chart-bar w-4 h-4"></i>
<span>Chart</span>
</button>
<button class="segment" data-view="table">
<i class="icon table w-4 h-4"></i>
<span>Table</span>
</button>
<button class="segment" data-view="list">
<i class="icon list w-4 h-4"></i>
<span>List</span>
</button>
<button class="segment" data-view="calendar">
<i class="icon calendar w-4 h-4"></i>
<span>Calendar</span>
</button>
</div>
<div id="view-content" class="p-6 bg-gray-50 rounded-lg">
<div data-content="chart" class="view-panel">
<h3 class="font-semibold mb-3">Chart View</h3>
<div
class="h-32 bg-gradient-to-r from-blue-400 to-blue-600 rounded-lg flex items-center justify-center text-white"
>
<i class="icon chart-bar w-16 h-16"></i>
</div>
</div>
<div data-content="table" class="view-panel hidden">
<h3 class="font-semibold mb-3">Table View</h3>
<table class="w-full">
<thead>
<tr class="border-b">
<th class="text-left p-2">Name</th>
<th class="text-left p-2">Value</th>
<th class="text-left p-2">Status</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="p-2">Product A</td>
<td class="p-2">$1,234</td>
<td class="p-2"><span class="text-green-600">Active</span></td>
</tr>
<tr class="border-b">
<td class="p-2">Product B</td>
<td class="p-2">$2,345</td>
<td class="p-2"><span class="text-yellow-600">Pending</span></td>
</tr>
</tbody>
</table>
</div>
<div data-content="list" class="view-panel hidden">
<h3 class="font-semibold mb-3">List View</h3>
<ul class="stack compact">
<li class="p-3 bg-white rounded-lg border flex items-center gap-3">
<i class="icon file-text w-5 h-5 text-blue-500"></i>
<span>Quarterly Report</span>
</li>
<li class="p-3 bg-white rounded-lg border flex items-center gap-3">
<i class="icon trending-up w-5 h-5 text-green-500"></i>
<span>Growth Analysis</span>
</li>
<li class="p-3 bg-white rounded-lg border flex items-center gap-3">
<i class="icon shield w-5 h-5 text-purple-500"></i>
<span>Security Audit</span>
</li>
</ul>
</div>
<div data-content="calendar" class="view-panel hidden">
<h3 class="font-semibold mb-3">Calendar View</h3>
<div class="grid grid-cols-7 gap-2 text-center">
<div class="p-2 font-semibold subhead">Sun</div>
<div class="p-2 font-semibold subhead">Mon</div>
<div class="p-2 font-semibold subhead">Tue</div>
<div class="p-2 font-semibold subhead">Wed</div>
<div class="p-2 font-semibold subhead">Thu</div>
<div class="p-2 font-semibold subhead">Fri</div>
<div class="p-2 font-semibold subhead">Sat</div>
<div class="p-2 text-gray-400">30</div>
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2 bg-blue-100 rounded">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
</div>
</div>
</div>
</div>
Responsive Behavior
Responsive Segmented Control
Overview
Analytics
Reports
Settings
This control stacks vertically on mobile screens (< 640px)
<div class="stack">
<div class="segmented-control responsive fluid">
<button class="segment active">Overview</button>
<button class="segment">Analytics</button>
<button class="segment">Reports</button>
<button class="segment">Settings</button>
</div>
<p class="subhead text-gray-600">This control stacks vertically on mobile screens (< 640px)</p>
</div>
Class API Reference
Type
Class
Usage
Notes
Base
segmented-controlOuter container that hosts the segments
Always required
segmentIndividual option button
One per choice
activeMarks the currently selected segment
Modifier on segment — exactly one
Sizes
xs28px tall — tiny
Modifier on segmented-control
sm32px tall — small
Modifier on segmented-control
(default) 36px tall — medium
No size class needed
xl40px tall — large
Modifier on segmented-control
lg44px tall — big
Modifier on segmented-control
Style Variants
(default) Grey track with white pill on the active segment
No style class needed
pillsFully rounded track and segments
Modifier on segmented-control
basicNo background track; standalone bordered buttons
Modifier on segmented-control
outlineBordered look — promoted to a Tailwind site override
Modifier on segmented-control
Density / Layout
icon-onlyTighter padding for icon-only segments
Modifier on segmented-control
compactReduced segment padding
Modifier on segmented-control
fluidSpans the full container width
Modifier on segmented-control
verticalStack segments vertically
Modifier on segmented-control
responsiveStacks vertically on screens < 640px
Modifier on segmented-control
Semantic Colors
primaryBlue active segment
Modifier on segmented-control
positive / successGreen active segment
Modifier on segmented-control
negative / errorRed active segment
Modifier on segmented-control
warningYellow active segment
Modifier on segmented-control
infoLight blue active segment
Modifier on segmented-control
orange teal violet purple pinkExtended palette accent colors
Decorative; prefer semantic names
States / Misc
disabledGreyed out and non-interactive
HTML attribute on segment
darkDark grey track for inverted surfaces
Modifier on segmented-control