Button Group

Features

• Grouped layout — Visually connects adjacent buttons by removing inner border radii
• Orientation — Horizontal (default) or vertical layout via the orientation prop
• Composable — Nest groups or combine with inputs and other controls
• Accessible — Renders as a semantic fieldset via Ark UI's polymorphic factory

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/button-group.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/button-group.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/button-group.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/button-group.json
    

Usage

      Copy
      <script setup lang="ts">
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
</script>

<template>
  <ButtonGroup aria-label="Actions">
    <Button variant="outline">Archive</Button>
    <Button variant="outline">Report</Button>
  </ButtonGroup>
</template>
    

Composition

      Copy
      ButtonGroup
└── Button
    

Accessibility

• The component renders as a fieldset element.
• Use Tab to navigate between focusable elements in the group.
• Label the group with aria-label or aria-labelledby.

      Copy
      <ButtonGroup aria-label="Pagination">
  <Button variant="outline">Previous</Button>
  <Button variant="outline">Next</Button>
</ButtonGroup>
    

Button Group vs Toggle Group

• Use Button Group when buttons perform independent actions.
• Use Toggle Group when buttons toggle a shared state.

Examples

Orientation

Set the orientation prop to change the layout.

Sizes

Control the size of buttons using the size prop on individual buttons.

Nested

Nest ButtonGroup components to create groups with spacing between them.

Input

Combine an input with action buttons in a single group.

Select

Pair a select with an input and submit button — useful for amount or unit pickers.

Dropdown

Create a split button group with a Menu for secondary actions.

API

ButtonGroup

The component also exports buttonGroupVariants and ButtonGroupVariants for building custom styled wrappers.

See Ark UI composition guide for polymorphic usage with asChild.