Segmented Button Group

Installation

Usage

import SegmentedButtonGroup from "@/components/ruixen/segmented-button-group";
import { useState } from "react";
 
export default function App() {
  const [selectedPeriod, setSelectedPeriod] = useState("Week");
  const [selectedPriority, setSelectedPriority] = useState("Medium");
 
  return (
    <div className="space-y-4">
      {/* Time Period Selector */}
      <SegmentedButtonGroup
        options={["Day", "Week", "Month", "Year"]}
        selected={selectedPeriod}
        onChange={setSelectedPeriod}
      />
 
      {/* Priority Selector */}
      <SegmentedButtonGroup
        options={["Low", "Medium", "High", "Critical"]}
        selected={selectedPriority}
        onChange={setSelectedPriority}
        className="bg-red-50"
      />
    </div>
  );
}

Props

Features

• Single Selection: Only one option can be selected at a time
• Smooth Transitions: Animated selection changes
• Rounded Design: Pill-shaped button group
• Connected Buttons: Seamless button connections
• Theme Aware: Adapts to light/dark themes
• Keyboard Accessible: Full keyboard navigation support

Styling Variants

Default Style

<SegmentedButtonGroup
  options={["Option 1", "Option 2", "Option 3"]}
  selected="Option 1"
/>

Custom Background

<SegmentedButtonGroup
  options={["Draft", "Published", "Archived"]}
  selected="Published"
  className="bg-blue-50 dark:bg-blue-900/20"
/>

Button States

• Active: Primary color background with white text
• Inactive: Transparent background with muted text
• Hover: Subtle background color change
• Focus: Keyboard focus indicators

Layout

The component uses:

• Rounded Full: rounded-full for pill shape
• Flex Layout: inline-flex for horizontal arrangement
• Connected Borders: Seamless button connections
• Responsive Padding: px-4 py-2 for comfortable touch targets

Use Cases

Perfect for:

• View Toggles: List/grid view switchers
• Time Periods: Day/week/month selectors
• Priority Levels: Low/medium/high options
• Status Filters: Active/inactive/all filters
• Display Modes: Compact/comfortable/spacious views