Tombol keyboard

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdDemo() {

Komponen kbd merender tampilan tuts keyboard — elemen <kbd> natif yang diberi gaya tanpa dependensi primitif, dibalut resep neobrutalis: garis tepi tebal, bayangan pekat, dan huruf mono. Kedua varian backend memakai file yang sama.

Gunakan komponen ini saat:

• Palet perintah dan pencarian — tampilkan petunjuk ⌘ K di samping pemicu atau di dalam input.
• Item menu dan tooltip — letakkan pintasan di samping label aksinya agar pengguna mempelajarinya langsung di tempat.
• Dokumentasi dan catatan perubahan — rujuk penekanan tombol secara persis di dalam teks tanpa tangkapan layar.

Instalasi#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
npx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/kbd.json
Salin

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded border-2 bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-sm select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
        className
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }

Penggunaan#

Salinimport { Kbd } from "@/components/ui/kbd"

Salin<Kbd>Ctrl</Kbd>

Komposisi#

Gunakan komposisi berikut untuk membangun Kbd dan KbdGroup:

SalinKbd
KbdGroup
├── Kbd
└── Kbd

Contoh#

Grup#

Gunakan komponen KbdGroup untuk mengelompokkan tombol keyboard.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdGroupExample() {

Tombol#

Gunakan komponen Kbd di dalam komponen Button untuk menampilkan tombol keyboard di dalam sebuah tombol.

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

Tooltip#

Anda dapat menggunakan komponen Kbd di dalam komponen Tooltip untuk menampilkan tooltip dengan tombol keyboard.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

Input Group#

Anda dapat menggunakan komponen Kbd di dalam komponen InputGroupAddon untuk menampilkan tombol keyboard di dalam input group.

import { SearchIcon } from "lucide-react"

import {

RTL#

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas#

Kbd merender elemen <kbd> natif — semantik HTML yang tepat untuk input keyboard — dan murni presentasional: pointer-events-none, select-none, tidak ada yang dapat difokus. Saat sebuah pintasan benar-benar berfungsi, deklarasikan juga pada kontrol yang menanganinya lewat aria-keyshortcuts (mis. aria-keyshortcuts="Control+B" pada tombolnya) agar teknologi asistif dapat mengumumkannya. Glif simbol seperti ⌘ diumumkan secara tidak konsisten oleh pembaca layar — tuliskan nama tombolnya secara lengkap di tempat pintasan itu penting.

Referensi API#

Kbd#

Gunakan komponen Kbd untuk menampilkan tombol keyboard.

Salin<Kbd>Ctrl</Kbd>

KbdGroup#

Gunakan komponen KbdGroup untuk mengelompokkan komponen Kbd.

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