# Key
A button made as a keycap: a cap with a lit top edge on a visible side, which travels down by the side's depth when pressed by pointer, Space or Enter. While its action runs it latches down with a small lamp lit, instead of a spinner, and pops back up when done.
- Category: Essentials
- Has parts that work alone: Icon key
- Docs: https://bevel-ui.vercel.app/components/key
- Import from: `@/components/ui/key`
## Install
```bash
npx shadcn@latest add @bevel/key
```
npm dependencies (installed by the CLI): `@base-ui/react`, `cn`.
## Anatomy
```tsx
Save changes
```
## Parts
| Part | Renders | Description |
| --- | --- | --- |
| `Key` | Button | variant primary (a lit amber key), secondary, ghost (no body until pressed) or danger; size sm, md or lg (32, 36 and 40px tall, side included, like shadcn's buttons). pending latches the key down, sets aria-busy and keeps focus; disabled sinks it into its housing. Render a link with render={} and nativeButton={false}. Icons from lucide size themselves. |
| `KeyLamp` | span (decorative) | A small lamp on the cap: dark at rest, lit while the key is pending. Put it first or last. |
## Example: Saving a form
Cancel and Save at the foot of a settings form. Save latches down with its lamp lit while the request runs, then pops back up.
```tsx
"use client"
import * as React from "react"
import { Key, KeyLamp } from "@/components/ui/key"
/** A settings form. Save latches down with its lamp lit while the request runs, then pops back up. */
export function KeyForm() {
const [name, setName] = React.useState("Acme Robotics")
const [saved, setSaved] = React.useState("Acme Robotics")
const [saving, setSaving] = React.useState(false)
const dirty = name.trim() !== saved
async function save(event: React.FormEvent) {
event.preventDefault()
setSaving(true)
await new Promise((resolve) => setTimeout(resolve, 1400))
setSaved(name.trim())
setSaving(false)
}
return (
)
}
```
## Example: Variants and sizes
Primary, secondary, ghost and danger at sm, md and lg, with icons, and disabled.
```tsx
import { ArrowRight, Download, Trash2 } from "lucide-react"
import { Key } from "@/components/ui/key"
/** Every variant at every size. Heights match shadcn's buttons, so keys drop into existing layouts. */
export function KeyVariants() {
return (