C Kbd

A visual pattern used to allow users to learn how to access actions via keyboard.

Check the Lexicon Keys Pattern for a more in-depth look at the motivations and proper usage of this component.

Base

The c-kbd component provides base size and spacing styles for the kbd HTML element.

1.5rem (24px) minimum width and 1.5rem (24px) tall kbd element with padding-left, padding-right, and border-width: 1px.

Esc,Ctrl, Shift,Alt,⌘+Shift+P⌘P

Snippet

<kbd className="c-kbd">Esc</kbd>
<kbd className="c-kbd">Ctrl</kbd>
<kbd className="c-kbd">Shift</kbd>
<kbd className="c-kbd">Alt</kbd>

<!-- This formatting forces browser to render no white space -->
<kbd className="c-kbd">
  <kbd className="c-kbd">&#8984;</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Shift</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">P</kbd>
</kbd>

<kbd className="c-kbd">
  <kbd className="c-kbd">&#8984;</kbd><kbd className="c-kbd">P</kbd>
</kbd>

Nested C Kbd

Nest multiple .c-kbd elements inside a single .c-kbd element to describe a keyboard command comprising of multiple keys.

⌘+Shift+Y⌘P⌘+Shift+Y⌘P

Snippet

<!-- This formatting forces browser to render no white space -->
<kbd className="c-kbd">
  <kbd className="c-kbd">&#8984;</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Shift</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Y</kbd>
</kbd>

<kbd className="c-kbd">
  <kbd className="c-kbd">&#8984;</kbd><kbd className="c-kbd">P</kbd>
</kbd>

<kbd className="c-kbd c-kbd-inline">
  <kbd className="c-kbd">&#8984;</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Shift</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Y</kbd>
</kbd>

<kbd className="c-kbd c-kbd-inline">
  <kbd className="c-kbd">&#8984;</kbd><kbd className="c-kbd">P</kbd>
</kbd>

⌘+Shift+Y⌘+Shift+Y⌘P

Snippet

<kbd className="c-kbd">
  <kbd className="c-kbd c-kbd-light">&#8984;</kbd>
  <span className="c-kbd-separator">+</span>
  <kbd className="c-kbd c-kbd-light">Shift</kbd>
  <span className="c-kbd-separator">+</span>
  <kbd className="c-kbd c-kbd-light">Y</kbd>
</kbd>

<!-- This formatting forces browser to render no white space -->
<kbd className="c-kbd c-kbd-light">
  <kbd className="c-kbd">&#8984;</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Shift</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Y</kbd>
</kbd>

<kbd className="c-kbd c-kbd-dark">
  <kbd className="c-kbd">&#8984;</kbd><kbd className="c-kbd">P</kbd>
</kbd>

C Kbd Monospaced

1.5rem (24px) minimum width and 1.5rem (24px) tall kbd element with no padding and border-width: 1px. This is generally used to display single characters.

⌘←↑→↓⇧⌥⮐⌘N

Snippet

<kbd className="c-kbd c-kbd-monospaced">&#8984;</kbd>

<kbd className="c-kbd c-kbd-monospaced">&#8592;</kbd>

<kbd className="c-kbd c-kbd-monospaced">&#8593;</kbd>

<kbd className="c-kbd c-kbd-monospaced">&#8594;</kbd>

<kbd className="c-kbd c-kbd-monospaced">&#8595;</kbd>

<kbd className="c-kbd c-kbd-monospaced">&#8679;</kbd>

<kbd className="c-kbd c-kbd-monospaced">&#8997;</kbd>

<!-- This formatting forces browser to render no white space -->
<kbd className="c-kbd c-kbd-monospaced">
  <kbd className="c-kbd">&#8984;</kbd><kbd className="c-kbd">N</kbd>
</kbd>

C Kbd Inline

No minimum width or height kbd element with padding: 0 and border-width: 0. This is used to display keyboard shortcuts in small spaces such as dropdown-item.

The most robust markup to use is nested kbd elements:

Snippet

<kbd className="c-kbd c-kbd-inline">
  <kbd className="c-kbd">key</kbd>
</kbd>

but the markup:

Snippet

<kbd className="c-kbd c-kbd-inline">key</kbd>

works as well.

EscCtrlShiftAlt⌘+Shift+Y⌘P

Snippet

<kbd className="c-kbd c-kbd-inline">
  <kbd className="c-kbd">Esc</kbd>
</kbd>

<kbd className="c-kbd c-kbd-inline">Ctrl</kbd>

<!-- This formatting forces browser to render no white space -->
<kbd className="c-kbd c-kbd-inline">
  <kbd className="c-kbd">&#8984;</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Shift</kbd><span className="c-kbd-separator">+</span
  ><kbd className="c-kbd">Y</kbd>
</kbd>

<kbd className="c-kbd c-kbd-inline">
  <kbd className="c-kbd">&#8984;</kbd><kbd className="c-kbd">P</kbd>
</kbd>

C Kbd Group

A container element for grouping text with several kbd elements together. This is also useful inside autofit-col if you don’t want several kbd elements to break to a new line.

PressEsc+Nto see an amazing effect.

Snippet

<span className="c-kbd-group">
  Press
  <kbd className="c-kbd">
    <kbd className="c-kbd">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

Color Variants

The color variants are modifier classes added to any of the base components listed above.

C Kbd Light

A color modifier on c-kbd to style the kbd element with dark text, light background and border.

Esc+NEsc+N

Snippet

<kbd className="c-kbd">
  <kbd className="c-kbd c-kbd-light">Esc</kbd>
  <span className="c-kbd-separator">+</span>
  <kbd className="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
</kbd>

<kbd className="c-kbd c-kbd-light">
  <kbd className="c-kbd">Esc</kbd>
  <span className="c-kbd-separator">+</span>
  <kbd className="c-kbd">N</kbd>
</kbd>

C Kbd Dark

A color modifier on c-kbd to style the kbd element with light text, dark background and border.

Esc+NEsc+N

Snippet

<kbd className="c-kbd">
  <kbd className="c-kbd c-kbd-dark">Esc</kbd>
  <span className="c-kbd-separator">+</span>
  <kbd className="c-kbd c-kbd-monospaced c-kbd-dark">N</kbd>
</kbd>

<kbd className="c-kbd c-kbd-dark">
  <kbd className="c-kbd">Esc</kbd>
  <span className="c-kbd-separator">+</span>
  <kbd className="c-kbd">N</kbd>
</kbd>

C Kbd Group Light

A color modifier on c-kbd-group, for use with light backgrounds, that sets the text color to \$secondary. This can be used with c-kbd-light and c-kbd-dark.

PressEsc+Nto see an amazing effect.

Snippet

<span className="c-kbd-group c-kbd-group-light">
  Press
  <kbd className="c-kbd">
    <kbd className="c-kbd c-kbd-light">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

<span className="c-kbd-group c-kbd-group-light">
  Press
  <kbd className="c-kbd">
    <kbd className="c-kbd c-kbd-dark">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd c-kbd-monospaced c-kbd-dark">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

C Kbd Group Dark

A color modifier on c-kbd-group, for use with dark backgrounds, that sets the text color to \$white. This can be used with c-kbd-light and c-kbd-dark.

PressEsc+Nto see an amazing effect.

Snippet

<span className="c-kbd-group c-kbd-group-dark">
  Press
  <kbd className="c-kbd">
    <kbd className="c-kbd c-kbd-light">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

<span className="c-kbd-group c-kbd-group-dark">
  Press
  <kbd className="c-kbd">
    <kbd className="c-kbd c-kbd-dark">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd c-kbd-monospaced c-kbd-dark">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

Size Variants

Size variants are modifier classes added to the base component to change the font size.

C Kbd Sm

c-kbd-sm and c-kbd-group-sm are size modifiers that sets font-size: 0.75rem (12px).

Esc+N

Esc+N

PressEsc+Nto see an amazing effect.

Snippet

<kbd className="c-kbd c-kbd-sm c-kbd-light">Esc</kbd>
<span className="c-kbd-separator c-kbd-sm">+</span>
<kbd className="c-kbd c-kbd-sm c-kbd-monospaced c-kbd-light">N</kbd>

<kbd className="c-kbd c-kbd-sm">
  <kbd className="c-kbd c-kbd-light">Esc</kbd>
  <span className="c-kbd-separator">+</span>
  <kbd className="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
</kbd>

<span className="c-kbd-group c-kbd-group-sm c-kbd-group-light">
  Press
  <kbd className="c-kbd">
    <kbd className="c-kbd c-kbd-light">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

<span className="c-kbd-group c-kbd-group-sm c-kbd-group-light">
  Press
  <kbd className="c-kbd c-kbd-lg">
    <kbd className="c-kbd c-kbd-light">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

C Kbd Lg

c-kbd-lg and c-kbd-group-lg are size modifiers that sets font-size: 1rem (16px).

Esc+N

Esc+N

PressEsc+Nto see an amazing effect.

Snippet

<kbd className="c-kbd c-kbd-lg c-kbd-light">Esc</kbd>
<span className="c-kbd-separator c-kbd-lg">+</span>
<kbd className="c-kbd c-kbd-lg c-kbd-monospaced c-kbd-light">N</kbd>

<kbd className="c-kbd c-kbd-lg">
  <kbd className="c-kbd c-kbd-light">Esc</kbd>
  <span className="c-kbd-separator">+</span>
  <kbd className="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
</kbd>

<span className="c-kbd-group c-kbd-group-lg c-kbd-group-light">
  Press
  <kbd className="c-kbd">
    <kbd className="c-kbd c-kbd-light">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd c-kbd-monospaced c-kbd-light">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

<span className="c-kbd-group c-kbd-group-lg c-kbd-group-light">
  Press
  <kbd className="c-kbd c-kbd-sm">
    <kbd className="c-kbd c-kbd-dark">Esc</kbd>
    <span className="c-kbd-separator">+</span>
    <kbd className="c-kbd c-kbd-monospaced c-kbd-dark">N</kbd>
  </kbd>
  to see an amazing effect.
</span>

Unicode Character List

Standard 0-255 (UTF-8) Character Set

! ” # $ % & ’ ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ � � � � � � � � � � � � � � � � � � � � � � � � � � � ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

General Punctuation (U+2000 to U+206F)

‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ ‛ “ ” „ ‟ † ‡ • ‣ ․ ‥ … ‧ ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › ※ ‼ ‽ ‾ ‿ ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆ ⁇ ⁈ ⁉ ⁊ ⁋ ⁌ ⁍ ⁎ ⁏ ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞

Superscripts and Subscripts (U+2070 to U+209F)

⁰ ⁱ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎ ₐ ₑ ₒ ₓ ₔ

Currency Symbols (U+20A0 to U+20CF)

₠ ₡ ₢ ₣ ₤ ₥ ₦ ₧ ₨ ₩ ₪ ₫ € ₭ ₮ ₯ ₰ ₱ ₲ ₳ ₴ ₵ ₶ ₷ ₸ ₹ ₺ ₻ ₼ ₽ ₾ ₿

Letterlike Symbols (U+2100 to U+214F)

℀ ℁ ℂ ℃ ℄ ℅ ℆ ℇ ℈ ℉ ℊ ℋ ℌ ℍ ℎ ℏ ℐ ℑ ℒ ℓ ℔ ℕ № ℗ ℘ ℙ ℚ ℛ ℜ ℝ ℞ ℟ ℠ ℡ ™ ℣ ℤ ℥ Ω ℧ ℨ ℩ K Å ℬ ℭ ℮ ℯ ℰ ℱ Ⅎ ℳ ℴ ℵ ℶ ℷ ℸ ℹ ℺ ℻ ℼ ℽ ℾ ℿ ⅀ ⅁ ⅂ ⅃ ⅄ ⅅ ⅆ ⅇ ⅈ ⅉ ⅊ ⅋ ⅌ ⅍ ⅎ

Greek Characters (U+0391 to U+03C9)

Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ ΢ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω

Number Forms (U+2150 to U+218F)

⅐ ⅑ ⅒ ⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞ ⅟ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅼ Ⅽ Ⅾ Ⅿ ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ ⅼ ⅽ ⅾ ⅿ ↀ ↁ ↂ Ↄ ↄ ↅ ↆ

Arrows (U+2190 to U+21FF)

← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮ ↯ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯ ⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿

Supplemental Arrows - A (U+27F0 to U+27FF)

⟰ ⟱ ⟲ ⟳ ⟴ ⟵ ⟶ ⟷ ⟸ ⟹ ⟺ ⟻ ⟼ ⟽ ⟾

Supplemental Arrows - B (U+2900 to U+297F)

⤀ ⤁ ⤂ ⤃ ⤄ ⤅ ⤆ ⤇ ⤈ ⤉ ⤊ ⤋ ⤌ ⤍ ⤎ ⤏ ⤐ ⤑ ⤒ ⤓ ⤔ ⤕ ⤖ ⤗ ⤘ ⤙ ⤚ ⤛ ⤜ ⤝ ⤞ ⤟ ⤠ ⤡ ⤢ ⤣ ⤤ ⤥ ⤦ ⤧ ⤨ ⤩ ⤪ ⤫ ⤬ ⤭ ⤮ ⤯ ⤰ ⤱ ⤲ ⤳ ⤴ ⤵ ⤶ ⤷ ⤸ ⤹ ⤺ ⤻ ⤼ ⤽ ⤾ ⤿ ⥀ ⥁ ⥂ ⥃ ⥄ ⥅ ⥆ ⥇ ⥈ ⥉ ⥊ ⥋ ⥌ ⥍ ⥎ ⥏ ⥐ ⥑ ⥒ ⥓ ⥔ ⥕ ⥖ ⥗ ⥘ ⥙ ⥚ ⥛ ⥜ ⥝ ⥞ ⥟ ⥠ ⥡ ⥢ ⥣ ⥤ ⥥ ⥦ ⥧ ⥨ ⥩ ⥪ ⥫ ⥬ ⥭ ⥮ ⥯ ⥰ ⥱ ⥲ ⥳ ⥴ ⥵ ⥶ ⥷ ⥸ ⥹ ⥺ ⥻ ⥼ ⥽ ⥾ ⥿ ⦀ ⦁ ⦂ ⦃

Mathematical Operators (U+2200 to U+22FF)

∀ ∁ ∂ ∃ ∄ ∅ ∆ ∇ ∈ ∉ ∊ ∋ ∌ ∍ ∎ ∏ ∐ ∑ − ∓ ∔ ∕ ∖ ∗ ∘ ∙ √ ∛ ∜ ∝ ∞ ∟ ∠ ∡ ∢ ∣ ∤ ∥ ∦ ∧ ∨ ∩ ∪ ∫ ∬ ∭ ∮ ∯ ∰ ∱ ∲ ∳ ∴ ∵ ∶ ∷ ∸ ∹ ∺ ∻ ∼ ∽ ∾ ∿ ≀ ≁ ≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌ ≍ ≎ ≏ ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗ ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟ ≠ ≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ≪ ≫ ≬ ≭ ≮ ≯ ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿ ⊀ ⊁ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋ ⊌ ⊍ ⊎ ⊏ ⊐ ⊑ ⊒ ⊓ ⊔ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ⊜ ⊝ ⊞ ⊟ ⊠ ⊡ ⊢ ⊣ ⊤ ⊥ ⊦ ⊧ ⊨ ⊩ ⊪ ⊫ ⊬ ⊭ ⊮ ⊯ ⊰ ⊱ ⊲ ⊳ ⊴ ⊵ ⊶ ⊷ ⊸ ⊹ ⊺ ⊻ ⊼ ⊽ ⊾ ⊿ ⋀ ⋁ ⋂ ⋃ ⋄ ⋅ ⋆ ⋇ ⋈ ⋉ ⋊ ⋋ ⋌ ⋍ ⋎ ⋏ ⋐ ⋑ ⋒ ⋓ ⋔ ⋕ ⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝ ⋞ ⋟ ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭ ⋮ ⋯ ⋰ ⋱ ⋲ ⋳ ⋴ ⋵ ⋶ ⋷ ⋸ ⋹ ⋺ ⋻ ⋼ ⋽ ⋾ ⋿

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 9, 2025 at 6:15:38 AM