Components
Segmented Button Group
The SegmentedButtonGroup component is a clean and flexible button group built entirely with shadcn UI. It visually splits a single button into multiple segments, allowing users to toggle between options like “Day / Week / Month” or priority levels. Each segment acts as an individual button, with the active segment highlighted while others remain outlined, creating a clear and intuitive selection interface. The component dynamically supports any number of segments, maintains rounded corners on the first and last buttons for a seamless appearance, and provides callbacks for handling user selection. Its simple yet elegant design makes it ideal for dashboards, filters, and interactive toggle controls in modern web applications.
"use client"
import SegmentedButtonGroup from "@/components/ui/segmented-button-group"
import { useState } from "react"
export default function SegmentedButtonGroupDemo() {
const [period, setPeriod] = useState("Day")
return (
<div className="p-6 flex flex-col gap-4">
<SegmentedButtonGroup
options={["Day", "Week", "Month"]}
selected={period}
onChange={(value) => setPeriod(value)}
/>
<p>Selected Period: {period}</p>
<SegmentedButtonGroup
options={["Low", "Medium", "High", "Critical"]}
onChange={(value) => console.log("Priority selected:", value)}
/>
</div>
)
}
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.