Installation

pnpm dlx kliping@latest add button-group

Usage

<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>

Accessibility

• 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.

Examples

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.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, class-variance-authority@^0.7.1, reka-ui@^2.10.3
Kliping items	separator
Files	components/ui/button-group/button-group.vue components/ui/button-group/button-group-separator.vue components/ui/button-group/button-group-text.vue components/ui/button-group/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<ButtonGroup>
  <ButtonGroup />
  <ButtonGroupSeparator />
  <ButtonGroupText />
</ButtonGroup>

API Reference

ButtonGroup

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

Prop	Type	Default	Description
orientation?	"vertical" | "horizontal"	—	The layout direction.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"button-group"
[data-orientation]	"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	Description
orientation?	DataOrientation	"vertical"	Orientation of the component. Either vertical or horizontal. Defaults to horizontal.
decorative?	boolean	—	Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Data attribute	Value
[data-slot]	"button-group-separator"

<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	Description
orientation?	"vertical" | "horizontal"	—	The layout direction.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-orientation]	"vertical" | "horizontal"

<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>

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --input, --muted, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.