⌘⇧⌥⌃Ctrl+B

Installation

pnpm dlx shadcn-vue@latest add kbd

Usage

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

<template>
  <Kbd>Ctrl</Kbd>
</template>

Examples

Grup

Pakai komponen KbdGroup untuk mengelompokkan beberapa tombol keyboard.

Use Ctrl + BCtrl + K to open the command palette

Button

Letakkan komponen Kbd di dalam Button untuk menampilkan tombol keyboard di dalam tombol.

Tooltip

Letakkan komponen Kbd di dalam Tooltip untuk menampilkan tooltip yang memuat tombol keyboard.

Input Group

Letakkan komponen Kbd di dalam InputGroupAddon untuk menampilkan tombol keyboard di dalam input group.

⌘K

API Reference

Kbd

Pakai komponen Kbd untuk menampilkan satu tombol keyboard.

Prop	Tipe	Bawaan
class	string	``

<Kbd>
Ctrl
</Kbd>

KbdGroup

Pakai komponen KbdGroup untuk mengelompokkan beberapa komponen Kbd.

Prop	Tipe	Bawaan
class	string	``

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>