Capítulo 72 de 108

Kbd

Core Idea

Displays textual keyboard input (keys/shortcuts) with a styled <kbd>-like element, plus a KbdGroup to cluster multiple keys together (e.g. Ctrl + K).

Key Concepts

  • Kbd: Renders a single keyboard key. Accepts className for styling; supports data-icon="inline-end" to adjust spacing when the child is a symbol/icon.
  • KbdGroup: Wraps multiple Kbd elements to visually group a shortcut sequence.
  • Composable inside Button, Tooltip, and InputGroupAddon to annotate actions with their shortcut.

Code Examples

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

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
  • O que demonstra: Agrupamento de teclas para exibir um atalho composto.
<Button variant="outline">
  Accept{" "}
  <Kbd data-icon="inline-end" className="translate-x-0.5">
    ⏎
  </Kbd>
</Button>
  • O que demonstra: Kbd embutido em Button para indicar o atalho de confirmação da ação.

Reference Tables

ComponentePropTypeDefault
KbdclassNamestring``
KbdGroupclassNamestring``

Key Takeaways

  1. Kbd é puramente apresentacional, não captura eventos de teclado, só exibe o rótulo.
  2. Combine com Tooltip para mostrar o atalho de uma ação sem poluir o botão principal.
  3. Dentro de InputGroupAddon, use para indicar atalho de busca (ex: ⌘K).
  4. KbdGroup é o jeito correto de exibir combinações (Ctrl+B), não concatenar Kbd soltos com +.

Connects To

  • Button: hospeda Kbd para indicar atalho da ação.
  • Tooltip: par comum para mostrar atalhos em hover.
  • Input Group: InputGroupAddon usa Kbd para exibir atalho de busca.
AnteriorItemPróximoCollapsible