Mokri

Preview

Installation

<> import.ts

import { ButtonGroup } from "@/components/ui/button-group"

Code

<> component.tsx

import { ButtonGroup } from "@/components/ui/button-group"

<ButtonGroup />

API Reference

ButtonGroup

Groups buttons together with segmented, attached, spaced, or bordered layouts.

<> import.ts

import { ButtonGroup, ButtonGroupItem, BorderedButtonGroup, ButtonGroupPresets, ButtonGroupConfigs } from "@/components/ui/button-group"

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	One or more ButtonGroupItem or Button children
`variant`	`"default" \| "segmented" \| "attached" \| "spaced" \| "bordered"`	`"default"`	Layout style for the group
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls padding and text size
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Stack buttons horizontally or vertically
`className`	`string`	`""`	Additional CSS classes
`disabled`	`boolean`	`false`	Disables the entire group

Examples

Example 1

<> example.tsx

// Segmented group
<ButtonGroup variant="segmented">
  <ButtonGroupItem active>Day</ButtonGroupItem>
  <ButtonGroupItem>Week</ButtonGroupItem>
  <ButtonGroupItem>Month</ButtonGroupItem>
</ButtonGroup>

Example 2

<> example.tsx

// Attached toolbar
<ButtonGroup variant="attached">
  <ButtonGroupItem>Bold</ButtonGroupItem>
  <ButtonGroupItem>Italic</ButtonGroupItem>
  <ButtonGroupItem>Underline</ButtonGroupItem>
</ButtonGroup>

Example 3

<> example.tsx

// Spaced actions
<ButtonGroup variant="spaced">
  <ButtonGroupItem>Cancel</ButtonGroupItem>
  <ButtonGroupItem variant="primary">Save</ButtonGroupItem>
</ButtonGroup>

Example 4

<> example.tsx

// Using preset
<ButtonGroup {...ButtonGroupPresets.filter}>
  <ButtonGroupItem active>All</ButtonGroupItem>
  <ButtonGroupItem>Active</ButtonGroupItem>
  <ButtonGroupItem>Archived</ButtonGroupItem>
</ButtonGroup>

Presets

filter

Small segmented control for filters

toolbar

Attached toolbar-style group

actions

Horizontally spaced action group

vertical

Default vertical stack

smallSegmented

Small segmented horizontal group

largeActions

Large spaced action group