Instalasi

npx shadcn-vue@latest add button

Penggunaan

<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 shadcn-vue@latest init --pointer.

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

Contoh

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>

Referensi API

Button

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

Prop	Tipe	Bawaan
variant	"default" | "outline" | "ghost" | "destructive" | "secondary" | "link"	"default"
size	"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"
asChild	boolean	false