component

Kbd

A keycap for displaying keyboard input — a single key or modifier rendered as a small, tactile <kbd> element. Kbd is built on top of Panel (surfaces, borders, radius) so its cap inherits the same theming as the rest of the system, and it locks to the control sizing scale so a key lines up beside same-size badges and buttons. Each Kbd renders one key; compose several side by side to express a shortcut.

Size

Three sizes lock to the control scale (shifted one tier down, like Badge): sm is a compact inline key, md (default) is the everyday cap, and lg suits command palettes and prominent shortcut callouts. A single-character key reads as a balanced square; multi-character labels expand horizontally.

EscEscEsc
---
import Kbd from "../Kbd.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Kbd size="sm">Esc</Kbd>
  <Kbd size="md">Esc</Kbd>
  <Kbd size="lg">Esc</Kbd>
</div>

Emphasis

The emphasis prop (forwarded to Panel) controls the cap’s visual weight. tertiary (default) is a neutral keycap; secondary tints the cap with the feedback ramp; primary fills it with a solid accent surface.

⌘⌘⌘
---
import Kbd from "../Kbd.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Kbd emphasis="tertiary">⌘</Kbd>
  <Kbd emphasis="secondary">⌘</Kbd>
  <Kbd emphasis="primary">⌘</Kbd>
</div>

Feedback Colors

Kbd inherits Panel’s semantic feedback colors — pair feedback with emphasis="secondary" to tint a cap for status or grouping.

NPSWD
---
import Kbd from "../Kbd.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Kbd feedback="neutral">N</Kbd>
  <Kbd feedback="primary" emphasis="secondary">P</Kbd>
  <Kbd feedback="success" emphasis="secondary">S</Kbd>
  <Kbd feedback="warning" emphasis="secondary">W</Kbd>
  <Kbd feedback="danger" emphasis="secondary">D</Kbd>
</div>

Key Combinations

Kbd is intentionally a single key. Build a shortcut by placing several caps side by side with your own separator, so spacing and the separator glyph stay under your control. To fuse the caps into a single joined cluster instead, wrap them in a Group.

⌘+K
⌃+⇧+P
---
import Kbd from "../Kbd.astro";
import { stack, flex } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

// Kbd renders a single key. Compose a shortcut by placing several side by side
// with your own separator — here a muted "+" between caps.
const sep = css({ color: "neutral.text.muted", fontSize: "sm" });
---

<div
  class={stack({
    gap: "lg",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <div class={flex({ gap: "2xs", align: "center" })}>
    <Kbd>⌘</Kbd>
    <span class={sep}>+</span>
    <Kbd>K</Kbd>
  </div>

  <div class={flex({ gap: "2xs", align: "center" })}>
    <Kbd>⌃</Kbd>
    <span class={sep}>+</span>
    <Kbd>⇧</Kbd>
    <span class={sep}>+</span>
    <Kbd>P</Kbd>
  </div>
</div>

Customizing

Kbd forwards Panel’s surface props (background, border, radius, shadow, …) and exposes a passThrough bag for per-slot style and attribute overrides.

⏎TabSpace
---
import Kbd from "../Kbd.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Kbd radius="full">⏎</Kbd>
  <Kbd background="transparent" border="bold">Tab</Kbd>
  <Kbd
    passThrough={{
      root: {
        style: { letterSpacing: "wide", textTransform: "uppercase" },
        props: { "aria-label": "Space bar" },
      },
    }}
  >
    Space
  </Kbd>
</div>
props · 21 shown · 21 total
active
boolean"current""checked""current-within"
default false

Mark this as the chosen one in a set (a current nav item, a checked option, a selected card). Where `interactive` says it *can* be clicked, `active` says it *is* the current choice. Use `activeEmphasis` to control how loud the state is. Combined with `interactive`, hover and press restart their stepping from the active baseline rather than falling back to the unchosen ramp. The three values differ only in what drives the state: `true` by the prop (via `data-panel-active`), `"checked"` by a wrapped native input (`:has(input:checked)` — zero JS, nothing to re-render), and `"current"` by an existing `aria-current`.

activeEmphasis
"primary""secondary""tertiary"
default the panel's `emphasis`

How loud the `active` state is. Defaults to the panel's own `emphasis`, so the chosen state lands on the same ramp as the resting look — this prop is the override for when the active item should be louder (or quieter) than the panel itself. `"primary"` fills with the feedback accent ramp and flips text to the contrast scale (~150 RGB units of separation — the option that reads at a glance in a dense list). `"secondary"` tints the feedback surface ramp and `"tertiary"` the neutral ramp; both promote text to `bold` and lift the border to the default line, but move the surface only ~7–18 units.

background
"surface.peak""surface.hill""surface.base""surface.valley""surface.ground""transparent"

Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).

border
"none""bold""default""muted""accent"

Border style: `none`, `default`, `bold`, or `muted`.

borderActive
"none""bold""inherit""default""muted""accent"

No description yet.

borderInteract
"none""bold""default""muted""accent"

Border style applied on hover / focus interaction.

children slot svelte
Snippet

No description yet.

element binding svelte
HTMLElementnull

No description yet.

emphasis
"primary""secondary""tertiary"

Visual emphasis / prominence level.

feedback
"primary""neutral""success""warning""danger""inherit"

Semantic color tone: `neutral`, `primary`, `success`, `warning`, `danger`, or `inherit`.

interactive
boolean

Enable interactive (hover / focus / press) affordances and states.

passThrough
KbdPassThrough<RootElementAttributes>

Per-slot style and attribute override bag. Each slot accepts a Panda `style` object and a `props` bag of HTML attributes merged onto that slot.

radius
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius override from the spacing scale (or `full` for fully rounded).

radiusBottom
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius for the bottom-left and bottom-right corners.

radiusLeft
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius for the top-left and bottom-left corners.

radiusRight
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius for the top-right and bottom-right corners.

radiusTop
"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius for the top-left and top-right corners.

reserveBorderSpace
boolean

Keep (or drop) the always-1px transparent border the panel reserves so a border appearing or changing never shifts layout. Computed automatically — it's reserved when a resting `border` is visible, or when `interactive` / `borderInteract` / `active` can change the border at runtime. Set `false` only on a panel that must not occupy that 1px (e.g. a borderless housing frame that would otherwise add 2px around a set).

shadow
"sm""md""lg""xl""none""xs"

Elevation shadow applied to the surface.

size
"sm""md""lg"
default "md"

Size variant for the keycap. sm: compact inline key. md: default. lg: larger key for command palettes and shortcut callouts.

translucent
boolean

Apply a frosted-glass effect with backdrop blur over a surface background.

Plus all standard <kbd> HTML attributes.

Type

  • Components
  • Blocks