Segment Component
Pill-shaped radio button group. Use .segment as container, child items use data-selected="true" or <input type="radio" checked> to mark selection.
Notes
- Base class:
.segment. Children can be <span>, <label>, or <a>.
- Selection via
data-selected="true" attribute or <input type="radio" checked> inside a label.
- Visual variants:
segment-dark (dark background), segment-inverted (swapped colors), segment-flush (no gap, rounded only at ends).
- Size presets:
segment-4 (16px) to segment-15 (60px) — default is segment-8 (32px).
Basic usage
Visual variants
Default
DefaultOptionOption
segment-dark
DarkOptionOption
segment-inverted
InvertedOptionOption
segment-flush
FlushOptionOption
Flush DarkOptionOption
Dark + inverted
Dark InvOptionOption
Comparison
DefaultOption
DarkOption
InvOption
D+IOption
Shapes
Default
DefaultOptionOption
segment-rounded
RoundedOptionOption
segment-fluid
FluidOptionOption
segment-square
SquareOptionOption
segment-pill
CircleOptionOption
Comparison
DefOpt
RndOpt
FluOpt
SqrOpt
CirOpt
Sizes (segment-4 ~ segment-15)
16px (segment-4)
4Option
20px (segment-5)
5Option
24px (segment-6)
6Option
28px (segment-7)
7Option
32px (segment-8, default)
8Option
36px (segment-9)
9Option
40px (segment-10)
10Option
44px (segment-11)
11Option
48px (segment-12)
12Option
52px (segment-13)
13Option
56px (segment-14)
14Option
60px (segment-15)
15Option
Theme colors (default style)
Primary
ABC
Secondary
ABC
Tertiary
ABC
Success
PassFailSkip
Error
ErrorWarnInfo
Info
InfoWarnError
Highlight
AlertBC
Warning
HelpFeedbackSupport
Caution
CautionBC
Ink
InkBC
Title
TitleDescCap
Description
DescCapTitle
Caption
CaptionDescTitle
Placeholder
PlaceholderBC
Theme colors (dark style)
Primary
ABC
Secondary
ABC
Success
PassFailSkip
Error
ErrorWarnInfo
Info
InfoWarnError
Highlight
AlertBC
Warning
HelpFeedSupport
Ink
InkBC
Title
TitleDescCap
Description
DescCapTitle
Caption
CaptionDescTitle
Placeholder
PlaceholderBC
Theme colors (inverted style)
Primary
ABC
Secondary
ABC
Success
PassFailSkip
Error
ErrorWarnInfo
Info
InfoWarnError
Highlight
AlertBC
Warning
HelpFeedSupport
Ink
InkBC
Title
TitleDescCap
Description
DescCapTitle
Caption
CaptionDescTitle
Placeholder
PlaceholderBC
Theme colors (dark + inverted)
Primary
ABC
Secondary
ABC
Success
PassFailSkip
Error
ErrorWarnInfo
Info
InfoWarnError
Highlight
AlertBC
Warning
HelpFeedSupport
Ink
InkBC
Title
TitleDescCap
Description
DescCapTitle
Caption
CaptionDescTitle
Placeholder
PlaceholderBC
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Tailwind colors (default)
ABC
ABC
Raw colors (default)
ABC
Tailwind colors (dark)
ABC
ABC
Tailwind colors (dark + inverted)
ABC
ABC
Use cases
Tab switcher (default + primary)
⭐ Favorites📁 Files👥 Team⚙️ Settings
Filter bar (dark + full width)
AllIn ProgressCompletedClosed
View mode (inverted + circle)
📊 Chart📋 List📑 Board
Status selector
✅ Pass⏳ Wait❌ Fail
⚠️ Warningℹ️ Info🚫 Error
Combined: dark + inverted + square + grid
HomeProductsServicesAboutContact