Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Keyboard key

Keyboard keys and shortcuts in five sizes.

Actions and feedback6 classesNo JavaScriptLight and dark

Example

Full

Classes

6 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the keyboard key. On a <kbd> in the example. Sets inline-flex display, alignment, width, height, padding and border, and --kbd-h and --kbd-fs.
CSS
.kbd {
  --kbd-h: 1.5rem;
  --kbd-fs: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--kbd-h);
  height: var(--kbd-h);
  padding-inline: 0.375em;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-sm);
  background-color: var(--surface-2);
  color: var(--foreground);
  box-shadow: inset 0 -2px 0 var(--border);
  font-family: var(--font-mono);
  font-size: var(--kbd-fs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
Size Extra small size. On a <kbd> in the example. Sets --kbd-h and --kbd-fs.
CSS
.kbd-xs {
  --kbd-h: 1.125rem;
  --kbd-fs: 0.625rem;
}
Size Small size. On a <kbd> in the example. Sets --kbd-h and --kbd-fs.
CSS
.kbd-sm {
  --kbd-h: 1.25rem;
  --kbd-fs: 0.6875rem;
}
Size Medium, the default size. On a <kbd> in the example. Sets --kbd-h and --kbd-fs.
CSS
.kbd-md {
  --kbd-h: 1.5rem;
  --kbd-fs: 0.75rem;
}
Size Large size. On a <kbd> in the example. Sets --kbd-h and --kbd-fs.
CSS
.kbd-lg {
  --kbd-h: 1.875rem;
  --kbd-fs: 0.875rem;
}
Size Extra large size. On a <kbd> in the example. Sets --kbd-h and --kbd-fs.
CSS
.kbd-xl {
  --kbd-h: 2.25rem;
  --kbd-fs: 1rem;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Keyboard key: start from the base class, then add modifiers -->
<p class="flex flex-wrap items-center gap-1 text-sm">Press <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">K</kbd> to open the command menu.</p>
<div class="flex flex-wrap items-center gap-2 mt-3">
  <kbd class="kbd kbd-xs">Esc</kbd>
  <kbd class="kbd kbd-sm">Tab</kbd>
  <kbd class="kbd kbd-md">Shift</kbd>
  <kbd class="kbd kbd-lg">Enter</kbd>
  <kbd class="kbd kbd-xl">Space</kbd>
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Use the kbd element for keys so the meaning survives without styles.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Actions and feedbackChipCompact tokens for filters, selections and people, removable and selectable without script.Actions and feedbackTagA squarer, smaller chip for metadata such as topics and versions.Actions and feedbackSpinnerLoading indicators: spinner, ring, dots, bars and pulse, in five sizes and eight tones.Actions and feedbackProgressA styled native progress element with tones, sizes, stripes and an animated indeterminate state.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.