ButtonGroup

Horizontal

Horizontal — see the example below.

tsx

import { Button } from "~/components/ui/base/button";
import { ButtonGroup } from "~/components/ui/base/button-group";

<ButtonGroup aria-label="Text actions">
  <Button variant="secondary" onClick$={() => {}}>Left</Button>
  <Button variant="secondary" onClick$={() => {}}>Center</Button>
  <Button variant="secondary" onClick$={() => {}}>Right</Button>
</ButtonGroup>

Vertical

Prop orientation="vertical" .

tsx

import { Button } from "~/components/ui/base/button";
import { ButtonGroup } from "~/components/ui/base/button-group";

<ButtonGroup orientation="vertical" aria-label="Stack">
  <Button variant="secondary" onClick$={() => {}}>One</Button>
  <Button variant="secondary" onClick$={() => {}}>Two</Button>
</ButtonGroup>

Primary variant

The same border merging also works with primary / danger.

tsx

import { Button } from "~/components/ui/base/button";
import { ButtonGroup } from "~/components/ui/base/button-group";

<ButtonGroup aria-label="Modes">
  <Button variant="primary" onClick$={() => {}}>A</Button>
  <Button variant="primary" onClick$={() => {}}>B</Button>
</ButtonGroup>

Metadata

Source: meta.generated.json (see npm run generate)

File base/button-group/meta.generated.json not found or path not allowed.