Kbd

An inline element for representing the keyboard


To print, press Cmd + P
To print, press <kbd class='kbd'>Cmd</kbd> + <kbd class='kbd'>P</kbd>

Overview

The kbd element makes text look like a button on the keyboard (perhaps not skeuomorphically, but at least figuratively). Inside of a content element, it is applied to the <kbd> tag automatically.

It applies a dark background and a monospace font.

Considerations

Spacing — Unless used inside a content element, the kbd element defines no margin. That means that you’ll need to manually position it inside your layout.

Variants

Beyond customization, the kbd element has no variants.

Accessibility

Use with kbd (<kbd>) elements. Using the .kbd element on <kbd> tags will help screenreaders and other assistive technologies better represent your content.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

Press F to pay respects
Example code
Press <kbd class="kbd">F</kbd> to pay respects

Customization

Name Type Default Description
--kbd-background color theme("colors.neutral.700") sets the kbd background
--kbd-color color theme("colors.white") sets the color

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.