Button group

Flush joined actions. One hairline between.

Align

Proof desk

Flush actions. The group is one object, not three buttons.

Install

npx @noordvc/raster-cli add button-group

Markup

<div class="rs-btn-group"><button class="rs-btn-ghost">Left</button><button class="rs-btn-ghost">Center</button><button class="rs-btn-ghost">Right</button></div>

React

import { ButtonGroup } from "@/components/raster/button-group";
import { Button } from "@/components/raster/button";

<ButtonGroup>
  <Button variant="ghost">Left</Button>
  <Button variant="ghost">Center</Button>
  <Button variant="ghost">Right</Button>
</ButtonGroup>

Classes

.rs-btn-group

Depends on

/button