Instalasi

npx shadcn-vue@latest add button-group

Penggunaan

<script setup lang="ts">
import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from '@/components/ui/button-group'
</script>

<template>
  <ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </ButtonGroup>
</template>

Aksesibilitas

• Komponen ButtonGroup memakai atribut role bernilai group.
• Pakai Tab untuk berpindah antar tombol di dalam grup.
• Pakai aria-label atau aria-labelledby untuk memberi label pada button group.

<template>
  <ButtonGroup aria-label="Button group">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </ButtonGroup>
</template>

ButtonGroup dibanding ToggleGroup

• Pakai ButtonGroup kalau tombol-tombol yang Anda kelompokkan menjalankan sebuah aksi.
• Pakai ToggleGroup kalau tombol-tombolnya berfungsi menyalakan dan mematikan sebuah keadaan.

Contoh

Orientasi

Atur prop orientation untuk mengubah susunan button group.

Ukuran

Ukuran tombol diatur lewat prop size pada masing-masing tombol.

Bersarang

Susun <ButtonGroup> secara bersarang untuk membuat kelompok tombol yang berjarak.

Separator

Komponen ButtonGroupSeparator memisahkan tombol-tombol di dalam satu grup secara visual.

Tombol bervarian outline tidak butuh pemisah karena sudah punya garis tepi. Untuk varian lain, pemisah disarankan agar hierarki visualnya lebih jelas.

Tombol Terbelah

Buat tombol terbelah dengan menaruh dua tombol yang dipisahkan ButtonGroupSeparator.

Input

Bungkus komponen Input bersama beberapa tombol.

Input Group

Bungkus komponen InputGroup untuk membuat susunan input yang lebih rumit.

Dropdown Menu

Buat tombol terbelah yang dipadukan dengan komponen DropdownMenu.

Select

Padukan dengan komponen Select.

Popover

Padukan dengan komponen Popover.

Referensi API

ButtonGroup

Komponen ButtonGroup adalah wadah yang menyatukan tombol-tombol terkait dengan tampilan seragam.

Prop	Type	Default
orientation	"horizontal" | "vertical"	"horizontal"

<template>
  <ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </ButtonGroup>
</template>

Susun beberapa button group secara bersarang untuk membuat tata letak berjarak yang lebih rumit. Lihat contoh bersarang untuk detailnya.

<template>
  <ButtonGroup>
    <ButtonGroup />
    <ButtonGroup />
  </ButtonGroup>
</template>

ButtonGroupSeparator

Komponen ButtonGroupSeparator memisahkan tombol-tombol di dalam satu grup secara visual.

Prop	Type	Default
orientation	"horizontal" | "vertical"	vertical

<template>
  <ButtonGroup>
    <Button>Button 1</Button>
    <ButtonGroupSeparator />
    <Button>Button 2</Button>
  </ButtonGroup>
</template>

ButtonGroupText

Pakai komponen ini untuk menampilkan teks di dalam button group.

Prop	Type	Default
as-child	boolean	false

<template>
  <ButtonGroup>
    <ButtonGroupText>Text</ButtonGroupText>
    <Button>Button</Button>
  </ButtonGroup>
</template>

Pakai prop as-child untuk menampilkan komponen Anda sendiri sebagai teksnya, misalnya sebuah label.

<script setup lang="ts">
import { ButtonGroupText } from '@/components/ui/button-group'
import { Label } from '@/components/ui/label'
</script>

<template>
  <ButtonGroup>
    <ButtonGroupText as-child>
      <Label for="name">Text</Label>
    </ButtonGroupText>
    <Input id="name" placeholder="Type something here..." />
  </ButtonGroup>
</template>