Kbd

Used to display textual user input from keyboard.

⌘⇧⌥⌃Ctrl+B

import { Kbd } from "@smartacteam/ambient-web/kbd";

export function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Kbd.Group>
        <Kbd.Item>⌘</Kbd.Item>
        <Kbd.Item>⇧</Kbd.Item>
        <Kbd.Item>⌥</Kbd.Item>
        <Kbd.Item>⌃</Kbd.Item>
      </Kbd.Group>
      <Kbd.Group>
        <Kbd.Item>Ctrl</Kbd.Item>
        <span>+</span>
        <Kbd.Item>B</Kbd.Item>
      </Kbd.Group>
    </div>
  );
}

Usage

import { Kbd } from "@smartacteam/ambient-web/kbd";

<Kbd.Item>⌘</Kbd.Item>
<Kbd.Group>
  <Kbd.Item>⌘</Kbd.Item>
  <Kbd.Item>⇧</Kbd.Item>
  <Kbd.Item>⌥</Kbd.Item>
  <Kbd.Item>⌃</Kbd.Item>
</Kbd.Group>

Examples

Group

Use the Kbd.Group component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

import { Kbd } from "@smartacteam/ambient-web/kbd";

export function KbdGroupExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <p className="text-sm text-foreground-secondary">
        Use{" "}
        <Kbd.Group>
          <Kbd.Item>Ctrl + B</Kbd.Item>
          <Kbd.Item>Ctrl + K</Kbd.Item>
        </Kbd.Group>{" "}
        to open the command palette
      </p>
    </div>
  );
}

Button

Use the Kbd.Item component inside a Button component to display a keyboard key inside a button.

import { Button } from "@smartacteam/ambient-web/button";
import { Kbd } from "@smartacteam/ambient-web/kbd";

export function KbdButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button size="sm" className="pr-2">
        Accept <Kbd.Item>⏎</Kbd.Item>
      </Button>
      <Button size="sm" className="pr-2">
        Cancel <Kbd.Item>Esc</Kbd.Item>
      </Button>
    </div>
  );
}

You can use the Kbd.Item component inside a Tooltip component to display a tooltip with a keyboard key.

import { Button } from "@smartacteam/ambient-web/button";
import { Kbd } from "@smartacteam/ambient-web/kbd";
import { Tooltip } from "@smartacteam/ambient-web/tooltip";

export function KbdTooltipDemo() {
  return (
    <div className="flex flex-wrap gap-4">
      <Tooltip.Root>
        <Tooltip.Trigger render={<Button size="sm">Save</Button>} />
        <Tooltip.Content>
          <div className="flex items-center gap-2">
            Save Changes <Kbd.Item>S</Kbd.Item>
          </div>
        </Tooltip.Content>
      </Tooltip.Root>
    </div>
  );
}

Input Group

You can use the Kbd.Item component inside a InputGroup.Addon component to display a keyboard key inside an input group.

⌘K

import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Input } from "@smartacteam/ambient-web/input";
import { InputGroup } from "@smartacteam/ambient-web/input-group";
import { Kbd } from "@smartacteam/ambient-web/kbd";

export function KbdInputGroup() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-6">
      <InputGroup.Root>
        <InputGroup.Input render={<Input.Text placeholder="Search..." />} />
        <InputGroup.Addon>
          <CentralIcon
            radius="2"
            stroke="1.5"
            fill="outlined"
            name="IconMagnifyingGlass"
          />
        </InputGroup.Addon>
        <InputGroup.Addon align="inline-end">
          <Kbd.Item>⌘</Kbd.Item>
          <Kbd.Item>K</Kbd.Item>
        </InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}