Kbd

Item
Label

Kbd

⌘⇧⌥⌃Ctrl+B

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Kbd component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/button.css";
@import "basecoat-css/components/button-group.css";
@import "basecoat-css/components/input-group.css";
@import "basecoat-css/components/kbd.css";
@import "basecoat-css/components/tooltip.css";
@import "basecoat-css/styles/vega.css";

Kbd examples compose Button, Button Group, Input Group, and Tooltip styles.

Using CDN or bundler imports? See the Installation page.

Add your kbd HTML

Use <kbd class="kbd"> for a key label. Use an inline wrapper with utilities when grouping multiple keys.

<kbd class="kbd">⌘K</kbd>

Keyboard labels are direction-neutral. Surrounding spacing should use logical utilities when position matters.

Examples

Group

Use Ctrl+B Ctrl+K to open the command palette

Button

Input Group

⌘K

RTL

Keyboard labels are direction-neutral. Surrounding spacing should use logical utilities when position matters.

⌘⇧⌥⌃Ctrl+B