Segmented Control
PreviewCodeShare
<div style="display:inline-flex;padding:4px;border-radius:9999px;background:#1f2937;border:1px solid #374151;gap:4px"><span style="padding:6px 12px;border-radius:9999px;background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#082f49;font-size:0.82em;font-weight:700">Preview</span><span style="padding:6px 12px;border-radius:9999px;color:#9ca3af;font-size:0.82em">Code</span><span style="padding:6px 12px;border-radius:9999px;color:#9ca3af;font-size:0.82em">Share</span></div>Customize
#22d3ee
#3b82f6
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | text | Preview | Displayed text |
activeColor | color | #22d3ee | Gradient start for active segment |
activeEnd | color | #3b82f6 | Gradient end for active segment |
Pill-shaped segmented control with active state