shadcn.io is an independent project built on shadcn/ui
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 Vue, Ark UI does not copy, paste, or undo.
Installation
Anatomy
Usage
<div class="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.
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.
