Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Button Group Variants for Ark UI

Two outline groups of editing actions: Copy, Paste, and Cut in one, Undo and Redo in the other.

Two separate outline groups. The first is Copy, Paste, and Cut. The second is Undo and Redo. They are split so clipboard actions are not in the same group as history. None of the buttons run. The shared border wants the same outline style on every button.

Keep one variant inside a group so the inner borders line up. A single undo control can just be a Button. In React, Ark UI does not copy, paste, or undo.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="flex flex-col gap-4">
  <ButtonGroup aria-label="Clipboard">
    <Button variant="outline">Copy</Button>
    <Button variant="outline">Paste</Button>
    <Button variant="outline">Cut</Button>
  </ButtonGroup>
  <ButtonGroup aria-label="History">
    <Button variant="outline">Undo</Button>
    <Button variant="outline">Redo</Button>
  </ButtonGroup>
</div>

FAQ

Which variants does this demo render?

Both groups set variant to outline on every button. The first group is Copy, Paste and Cut, and the second is Undo and Redo.

What size are these buttons?

They omit size, so they use the button's default height. Set size on each Button when you want sm or lg, and use the same value on every button in that group.

Do Copy and Paste run an action?

No. The buttons have no click handler. Put the action on the Button you want to run.

Why are Undo and Redo in a second group?

They are a separate ButtonGroup under the first, in a column with gap-4. Each group keeps its own shared border and its own aria-label, Clipboard and History.

How do I make the buttons filled?

Set variant to default or secondary on every button in the group. Keep one variant per group so the joined edges match.

How does keyboard focus work here?

Tab moves from button to button. Enter or Space activates the focused button. The group does not handle Arrow keys.

API Reference

Button Group

Sets aria-label="Clipboard" and aria-label="History". The rest is on the Button Group page.

Button

Sets variant="outline". The rest is on the Button page.

All 39 button group examples