Installation

pnpm dlx kliping@latest add button

Usage

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button variant="outline">
    Button
  </Button>
</template>

Bentuk Kursor

Tailwind v4 berganti dari cursor: pointer ke cursor: default untuk komponen tombol.

Kalau Anda ingin mempertahankan perilaku cursor: pointer, tambahkan kode berikut ke file CSS Anda:

Perilaku ini juga bisa diaktifkan saat menyiapkan project lewat npx kliping@latest init --pointer.

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Examples

Ukuran

Bawaan

Outline

Secondary

Ghost

Destructive

Link

Icon

<template>
  <Button variant="outline" size="icon" aria-label="Submit">
    <CircleFadingArrowUpIcon />
  </Button>
</template>

Dengan Ikon

Jarak antara ikon dan teks menyesuaikan otomatis dengan ukuran tombol. Anda tidak perlu menambahkan margin pada ikonnya.

Sudut Membulat

Pakai class rounded-full untuk membuat tombol berbentuk bulat penuh.

Spinner

Button Group

Untuk membuat kelompok tombol, pakai komponen ButtonGroup. Keterangan lengkapnya ada di dokumentasi Button Group.

Link (asChild)

Pakai prop as-child untuk membuat komponen lain tampil seperti tombol. Berikut contoh tautan yang tampil seperti tombol.

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button as-child>
    <a href="/login">Login</a>
  </Button>
</template>

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	class-variance-authority@^0.7.1, reka-ui@^2.10.3
Files	components/ui/button/button.vue components/ui/button/index.ts

API Reference

Button

Komponen Button adalah pembungkus elemen button yang menambahkan beragam style dan fungsi.

Prop	Type	Default	Description
variant?	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"	—	The visual style.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	—	The visual size.
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	"button"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"button"
[data-variant]	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"
[data-size]	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"

CSS Variables

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

Credits

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