Segment Control

An iOS-style segmented control for toggling between options.

Preview

Usage

<div class="glass-segment-control">
  <button class="segment-item active">Day</button>
  <button class="segment-item">Week</button>
  <button class="segment-item">Month</button>
</div>

Toggle the .active class with JavaScript to switch the selected segment.

Structure

Element / Class	Purpose
`.glass-segment-control`	Outer container with recessed track
`.segment-item`	Individual segment button
`.segment-item.active`	Currently selected segment (gets glass material + depth)

CSS Details

Track: Dark recessed background (rgba(0,0,0,0.08)), 3px padding, 2px gap between items
Inactive Item: Transparent background, secondary text color, hover brightens text
Active Item: Full glass material with thin blur and subtle depth shadow
Border Radius: Outer is --glass-radius-md + 2px, inner items match --glass-radius-md
Font: 0.85rem, weight 600