Kbd

import { CommandIcon } from "lucide-react"

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

export function KbdDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Kbd>Esc</Kbd>
      <Kbd>K</Kbd>
      <Kbd>
        <CommandIcon />
      </Kbd>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span className="text-xs text-muted-foreground">then</span>
        <Kbd>B</Kbd>
      </KbdGroup>
    </div>
  )
}

import { SearchIcon } from "lucide-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"

export function KbdQuickActions() {
  return (
    <InputGroup className="max-w-xs">
      <InputGroupInput placeholder="Quick actions" aria-label="Quick actions" />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <Kbd>⌘K</Kbd>
      </InputGroupAddon>
    </InputGroup>
  )
}

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

export function KbdInTextAndButtons() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <p className="text-muted-foreground">
        Press <Kbd>⌘</Kbd> <Kbd>/</Kbd> to see every shortcut.
      </p>
      <Button variant="secondary">
        Search
        <Kbd data-icon="inline-end">⌘K</Kbd>
      </Button>
    </div>
  )
}