Button Group

since 1.2

Button Group arranges related buttons into a single attached control, with optional separators and inline text.

Example

https://

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@strongtie/design-system/button-group"
import { ChevronDown, Copy, Redo2, Undo2 } from "lucide-react"

export function ButtonGroupDefault() {
  return (
    <div className="flex flex-col items-start gap-4">
      <ButtonGroup>
        <Button variant="outline">
          <Undo2 />
          Undo
        </Button>
        <Button variant="outline">
          <Redo2 />
          Redo
        </Button>
        <ButtonGroupSeparator />
        <Button variant="outline">
          <Copy />
          Duplicate
        </Button>
      </ButtonGroup>

      <ButtonGroup>
        <ButtonGroupText>https://</ButtonGroupText>
        <Button variant="outline">design.strongtie.io</Button>
        <Button variant="outline" aria-label="Choose environment">
          <ChevronDown />
        </Button>
      </ButtonGroup>
    </div>
  )
}

Install

import { ButtonGroup } from "@strongtie/design-system/button-group"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

ButtonGroup
ButtonGroupSeparator
ButtonGroupText

Props

`<ButtonGroup>`

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical" \| null`	-

Variants

orientation

horizontalvertical

Breadcrumb Button

On This Page

Example Install Components Props <ButtonGroup>Variants