v0.1 · in development

Kbd

A keyboard-key cap for documenting shortcuts.

⌘K

Ctrl

Shift

P

esctabenter

import { HStack, Kbd, Text } from "astralis-ui";

export function KbdDemo() {
  return (
    <HStack gap="6" alignItems="center" wrap="wrap">
      <HStack gap="1" alignItems="center">
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </HStack>
      <HStack gap="1" alignItems="center">
        <Kbd>Ctrl</Kbd>
        <Text size="xs" color="subtle">+</Text>
        <Kbd>Shift</Kbd>
        <Text size="xs" color="subtle">+</Text>
        <Kbd>P</Kbd>
      </HStack>
      <HStack gap="1" alignItems="center">
        <Kbd size="sm">esc</Kbd>
        <Kbd size="md">tab</Kbd>
        <Kbd size="lg">enter</Kbd>
      </HStack>
    </HStack>
  );
}

Import#

import { Kbd } from "astralis-ui";

Props#

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Cap size.

Renders a semantic <kbd> element — screen readers announce it as keyboard input, and the mono font plus bottom-weighted border give it the keycap depth.