Badges

Shortcut Key

A clean keyboard shortcut badge for command hints, docs, and toolbars.

shortcutkeyboarddocs

Installation

Copy and paste the code into your project.

Accessibility notes

Pair shortcuts with text actions so users do not need to memorize key combinations.

Ctrl+K

Preview accent

TypeScript

export function ShortcutKey() {
  return (
    <span className="inline-flex items-center gap-1 rounded-md border border-white/12 bg-white/[0.06] p-1 text-xs font-semibold text-slate-200">
      <kbd className="rounded bg-[#1b1b1d] px-2 py-1 text-[#d8fffb]">Ctrl</kbd>
      <span className="text-slate-500">+</span>
      <kbd className="rounded bg-[#1b1b1d] px-2 py-1 text-[#d8fffb]">K</kbd>
    </span>
  );
}

Usage

<ShortcutKey />

Related components

KCommandEnterRunEscClose

Badges

Command Hint Bar

Beginner

A compact shortcut strip for command palettes, editors, and agent workspaces.

shortcutkeyboardcommand

View component

AIPlanningWritingReviewing

Badges

Agent Status Ribbon

Beginner

A compact status ribbon for showing the current phase of an agent workflow.

agentstatusworkflow

View component

EBAIQA

3 reviewers

Badges

Avatar Stack

Beginner

A small collaborator stack for reviews, presence, and team-owned workflows.

avatarpresenceteam

View component