Koori UI
Components

GlassToggleGroup

A set of two-state buttons that can be toggled on or off.

Preview

Usage

import { GlassToggleGroup, GlassToggleGroupItem } from "koori-ui";
import { Bold, Italic, Underline } from "lucide-react";
 
<GlassToggleGroup type="single" defaultValue="bold" variant="outline">
  <GlassToggleGroupItem value="bold"><Bold className="h-4 w-4" /></GlassToggleGroupItem>
  <GlassToggleGroupItem value="italic"><Italic className="h-4 w-4" /></GlassToggleGroupItem>
  <GlassToggleGroupItem value="underline"><Underline className="h-4 w-4" /></GlassToggleGroupItem>
</GlassToggleGroup>

Props

GlassToggleGroup

PropTypeDefaultDescription
type"single" | "multiple"—Whether one or multiple items can be active
valuestring | string[]—Controlled value
defaultValuestring | string[]—Default value
onValueChange(value) => void—Fired when value changes
size"sm" | "md" | "lg""md"Size of all items
variant"default" | "outline""default"Visual style
disabledbooleanfalseDisable the whole group

GlassToggleGroupItem

PropTypeDefaultDescription
valuestring—Unique value for the item
disabledbooleanfalseDisable the item

All Radix ToggleGroup props are also supported.

Previous

GlassToggle

On this page