Data display

Kbd

Keyboard keys and key combinations on the native kbd element.

Class name	Type	Description
`kbdplf:kbd`	Component	A keyboard key
`kbd-groupplf:kbd-group`	Part	The keys of one combination

Default

K Ctrl Shift Enter Esc

<kbd class="kbd">K</kbd>
<kbd class="kbd">Ctrl</kbd>
<kbd class="kbd">Shift</kbd>
<kbd class="kbd">Enter</kbd>
<kbd class="kbd">Esc</kbd>

<kbd class="plf:kbd">K</kbd>
<kbd class="plf:kbd">Ctrl</kbd>
<kbd class="plf:kbd">Shift</kbd>
<kbd class="plf:kbd">Enter</kbd>
<kbd class="plf:kbd">Esc</kbd>

import { Kbd } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Kbd>K</Kbd>
      <Kbd>Ctrl</Kbd>
      <Kbd>Shift</Kbd>
      <Kbd>Enter</Kbd>
      <Kbd>Esc</Kbd>
    </>
  );
}

import { Kbd } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Kbd>K</Kbd>
      <Kbd>Ctrl</Kbd>
      <Kbd>Shift</Kbd>
      <Kbd>Enter</Kbd>
      <Kbd>Esc</Kbd>
    </>
  );
}

Key combinations

Hide the separators with aria-hidden="true".

Ctrl+K Ctrl + Shift + P

<kbd class="kbd-group"><kbd class="kbd">Ctrl</kbd><span aria-hidden="true">+</span><kbd class="kbd">K</kbd></kbd>
<kbd class="kbd-group">
  <kbd class="kbd">Ctrl</kbd>
  <span aria-hidden="true">+</span>
  <kbd class="kbd">Shift</kbd>
  <span aria-hidden="true">+</span>
  <kbd class="kbd">P</kbd>
</kbd>

<kbd class="plf:kbd-group"><kbd class="plf:kbd">Ctrl</kbd><span aria-hidden="true">+</span><kbd class="plf:kbd">K</kbd></kbd>
<kbd class="plf:kbd-group">
  <kbd class="plf:kbd">Ctrl</kbd>
  <span aria-hidden="true">+</span>
  <kbd class="plf:kbd">Shift</kbd>
  <span aria-hidden="true">+</span>
  <kbd class="plf:kbd">P</kbd>
</kbd>

import { Kbd, KbdGroup } from '@pelatform/react';

export function Example() {
  return (
    <>
      <KbdGroup><Kbd>Ctrl</Kbd><span aria-hidden="true">+</span><Kbd>K</Kbd></KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span aria-hidden="true">+</span>
        <Kbd>Shift</Kbd>
        <span aria-hidden="true">+</span>
        <Kbd>P</Kbd>
      </KbdGroup>
    </>
  );
}

import { Kbd, KbdGroup } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <KbdGroup><Kbd>Ctrl</Kbd><span aria-hidden="true">+</span><Kbd>K</Kbd></KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span aria-hidden="true">+</span>
        <Kbd>Shift</Kbd>
        <span aria-hidden="true">+</span>
        <Kbd>P</Kbd>
      </KbdGroup>
    </>
  );
}

Modifier symbols

Hide the symbol and give its name with sr-only.

⌘Command ⇧Shift ⌥Option ⌃Control

<kbd class="kbd"><span aria-hidden="true">⌘</span><span class="sr-only">Command</span></kbd>
<kbd class="kbd"><span aria-hidden="true">⇧</span><span class="sr-only">Shift</span></kbd>
<kbd class="kbd"><span aria-hidden="true">⌥</span><span class="sr-only">Option</span></kbd>
<kbd class="kbd"><span aria-hidden="true">⌃</span><span class="sr-only">Control</span></kbd>

<kbd class="plf:kbd"><span aria-hidden="true">⌘</span><span class="plf:sr-only">Command</span></kbd>
<kbd class="plf:kbd"><span aria-hidden="true">⇧</span><span class="plf:sr-only">Shift</span></kbd>
<kbd class="plf:kbd"><span aria-hidden="true">⌥</span><span class="plf:sr-only">Option</span></kbd>
<kbd class="plf:kbd"><span aria-hidden="true">⌃</span><span class="plf:sr-only">Control</span></kbd>

import { Kbd } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Kbd><span aria-hidden="true">⌘</span><span className="sr-only">Command</span></Kbd>
      <Kbd><span aria-hidden="true">⇧</span><span className="sr-only">Shift</span></Kbd>
      <Kbd><span aria-hidden="true">⌥</span><span className="sr-only">Option</span></Kbd>
      <Kbd><span aria-hidden="true">⌃</span><span className="sr-only">Control</span></Kbd>
    </>
  );
}

import { Kbd } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Kbd><span aria-hidden="true">⌘</span><span className="plf:sr-only">Command</span></Kbd>
      <Kbd><span aria-hidden="true">⇧</span><span className="plf:sr-only">Shift</span></Kbd>
      <Kbd><span aria-hidden="true">⌥</span><span className="plf:sr-only">Option</span></Kbd>
      <Kbd><span aria-hidden="true">⌃</span><span className="plf:sr-only">Control</span></Kbd>
    </>
  );
}

Inside a button

Hide the key with aria-hidden="true", so the button’s name stays the action.

<button class="btn btn-outline">Submit <kbd class="kbd" aria-hidden="true">Enter</kbd></button>

<button class="plf:btn plf:btn-outline">Submit <kbd class="plf:kbd" aria-hidden="true">Enter</kbd></button>

import { Button, Kbd } from '@pelatform/react';

export function Example() {
  return <Button variant="outline">Submit <Kbd aria-hidden="true">Enter</Kbd></Button>;
}

import { Button, Kbd } from '@pelatform/react/prefixed';

export function Example() {
  return <Button variant="outline">Submit <Kbd aria-hidden="true">Enter</Kbd></Button>;
}

Tooltip needs its script.

<span class="tooltip" data-plf-tooltip>
  <button class="btn btn-outline">Search</button>
  <span class="tooltip-content" hidden>Shortcut: <kbd class="kbd-group"><kbd class="kbd">Ctrl</kbd><span aria-hidden="true">+</span><kbd class="kbd">K</kbd></kbd></span>
</span>

<span class="plf:tooltip" data-plf-tooltip>
  <button class="plf:btn plf:btn-outline">Search</button>
  <span class="plf:tooltip-content" hidden>Shortcut: <kbd class="plf:kbd-group"><kbd class="plf:kbd">Ctrl</kbd><span aria-hidden="true">+</span><kbd class="plf:kbd">K</kbd></kbd></span>
</span>

React

Kbd from @pelatform/react renders a key, and its part KbdGroup the keys of one combination, both on the native kbd element. Their props are a kbd element’s, className and ref included.

CSS variables

Override on a root, a group or a single key; set on a group, they reach its keys.

Variable	Default
`--plf-kbd-bg`	Muted surface
`--plf-kbd-color`	Muted text on keys; the surrounding text color on groups
`--plf-kbd-border`	Transparent
`--plf-kbd-height`	`1.25rem` (20px), the minimum height and width
`--plf-kbd-radius`	Medium radius (6px)
`--plf-kbd-font-size`	`12px`
`--plf-kbd-gap`	Space 1, between keys in a group

⌘Command K

<kbd class="kbd-group" style="--plf-kbd-font-size: 16px; --plf-kbd-height: 24px">
  <kbd class="kbd"><span aria-hidden="true">⌘</span><span class="sr-only">Command</span></kbd>
  <kbd class="kbd">K</kbd>
</kbd>

<kbd class="plf:kbd-group" style="--plf-kbd-font-size: 16px; --plf-kbd-height: 24px">
  <kbd class="plf:kbd"><span aria-hidden="true">⌘</span><span class="plf:sr-only">Command</span></kbd>
  <kbd class="plf:kbd">K</kbd>
</kbd>

import type { CSSProperties } from 'react';
import { Kbd, KbdGroup } from '@pelatform/react';

export function Example() {
  return (
    <KbdGroup style={{ '--plf-kbd-font-size': '16px', '--plf-kbd-height': '24px' } as CSSProperties}>
      <Kbd><span aria-hidden="true">⌘</span><span className="sr-only">Command</span></Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

import type { CSSProperties } from 'react';
import { Kbd, KbdGroup } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <KbdGroup style={{ '--plf-kbd-font-size': '16px', '--plf-kbd-height': '24px' } as CSSProperties}>
      <Kbd><span aria-hidden="true">⌘</span><span className="plf:sr-only">Command</span></Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

#Default

#Key combinations

#Modifier symbols

#Inside a button

#Inside a tooltip

#React

#CSS variables