type
Kbd
A key on the keyboard, for shortcuts and instructions such as Esc or Ctrl K.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Put each key in a <kbd> with the component class.
Press Esc to close the dialog.
<p>Press <kbd class="ca-kbd">Esc</kbd> to close the dialog.</p>Examples
Shortcuts
Wrap a key combination in an outer <kbd> without the class, so the keys read as one input.
Search with Ctrl + K, or ⌘ K on a Mac.
<p>Search with <kbd><kbd class="ca-kbd">Ctrl</kbd> + <kbd class="ca-kbd">K</kbd></kbd>, or <kbd><kbd class="ca-kbd">⌘</kbd> <kbd class="ca-kbd">K</kbd></kbd> on a Mac.</p>Guidance and accessibility
When to use
- Use
ca-kbdfor keys people press: in help text, menus and tooltips. - Write the key the way it is printed on the keyboard: Esc, Ctrl, Enter.
- Show the Mac key next to the Windows and Linux one when the shortcut differs.
Accessibility
<kbd>tells assistive technology that the text is keyboard input; keep it on every key.- Screen readers read symbols such as ⌘ in different ways. In instructions, write the key name too, or add a visually hidden “Command”.
- A shortcut only helps people who know it. Every action needs a visible control as well.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-kbd | Component | One key, drawn as a keycap. Use it on <kbd>. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Press Esc to close the dialog.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Press Esc to close the dialog.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Press Esc to close the dialog.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Press Esc to close the dialog.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>