React KBD (Keyboard) - Flowbite

Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components

The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.

Use the semantic <Kbd> keyboard input tag to use the default monospace font which is best suited for representing input keys.

To start using the <Kbd> component you need to import it from flowbite-react:

'use client';

import { Kbd } from 'flowbite-react';

Default KBD#

Here’s a list of KBD components that you can use inside any other element.

Edit on GitHub

ShiftCtrlTabCaps LockEscSpacebarEnter

React TypeScript

'use client';

import { Kbd } from 'flowbite-react';

export default function DefaultKBD() {
  return (
    <>
      <Kbd>
        Shift
      </Kbd>
      <Kbd>
        Ctrl
      </Kbd>
      <Kbd>
        Tab
      </Kbd>
      <Kbd>
        Caps Lock
      </Kbd>
      <Kbd>
        Esc
      </Kbd>
      <Kbd>
        Spacebar
      </Kbd>
      <Kbd>
        Enter
      </Kbd>
    </>
  )
}

KBD inside text#

Use this example by nesting an inline KBD component inside a paragraph.

Edit on GitHub

Please press Ctrl + Shift + R to re-render an MDN page.

React TypeScript

'use client';

import { Kbd } from 'flowbite-react';

export default function InsideTextKBD() {
  return (
    <p>
      Please press
      <Kbd>
        Ctrl
      </Kbd>
      +
      <Kbd>
        Shift
      </Kbd>
      +
      <Kbd>
        R
      </Kbd>
      to re-render an MDN page.
    </p>
  )
}

KBD inside table#

The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.

Edit on GitHub

Key	Description
ShiftorTab	Navigate to interactive elements
EnterorSpacebar	Ensure elements with ARIA role="button" can be activated with both key commands.
or	Choose and activate previous/next tab.

React TypeScript

'use client';

import { Kbd, Table } from 'flowbite-react';
import { MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowDown, MdKeyboardArrowUp  } from 'react-icons/md';

export default function TableKBD() {
  return (
    <Table>
      <Table.Head>
        <Table.HeadCell>
          Key
        </Table.HeadCell>
        <Table.HeadCell>
          Description
        </Table.HeadCell>
      </Table.Head>
      <Table.Body className="divide-y">
        <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <Kbd>
              Shift
            </Kbd>
            <span className="pr-1">
              or
            </span>
            <Kbd>
              Tab
            </Kbd>
          </Table.Cell>
          <Table.Cell>
            Navigate to interactive elements
          </Table.Cell>
        </Table.Row>
        <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <Kbd>
              Enter
            </Kbd>
            <span className="pr-1">
              or
            </span>
            <Kbd>
              Spacebar
            </Kbd>
          </Table.Cell>
          <Table.Cell>
            Ensure elements with ARIA role="button" can be activated with both key commands.
          </Table.Cell>
        </Table.Row>
        <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <Kbd icon={MdKeyboardArrowUp} />
            <Kbd icon={MdKeyboardArrowDown} />
            <span className="pr-1">
              or
            </span>
            <Kbd icon={MdKeyboardArrowLeft} />
            <Kbd icon={MdKeyboardArrowRight} />
          </Table.Cell>
          <Table.Cell>
            Choose and activate previous/next tab.
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

Arrow keys#

Use this example to show arrow keys inside the KBD styled element.

Edit on GitHub

React TypeScript

'use client';

import { Kbd } from 'flowbite-react';
import { MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowDown, MdKeyboardArrowUp  } from 'react-icons/md';

export default function ArrowKeysKBD() {
  return (
    <>
      <Kbd icon={MdKeyboardArrowUp} />
      <Kbd icon={MdKeyboardArrowDown} />
      <Kbd icon={MdKeyboardArrowLeft} />
      <Kbd icon={MdKeyboardArrowRight} />
    </>
  )
}

Letter Keys#

Use this example to show arrow keys inside the KBD styled element.

Edit on GitHub

QWERTYIOPASDFGHJKLZXCVBNM

React TypeScript

'use client';

import { Kbd } from 'flowbite-react';

export default function LetterKeysKBD() {
  return (
    <div className="flex flex-wrap">
      <Kbd>
        Q
      </Kbd>
      <Kbd>
        W
      </Kbd>
      <Kbd>
        E
      </Kbd>
      <Kbd>
        R
      </Kbd>
      <Kbd>
        T
      </Kbd>
      <Kbd>
        Y
      </Kbd>
      <Kbd>
        I
      </Kbd>
      <Kbd>
        O
      </Kbd>
      <Kbd>
        P
      </Kbd>
      <Kbd>
        A
      </Kbd>
      <Kbd>
        S
      </Kbd>
      <Kbd>
        D
      </Kbd>
      <Kbd>
        F
      </Kbd>
      <Kbd>
        G
      </Kbd>
      <Kbd>
        H
      </Kbd>
      <Kbd>
        J
      </Kbd>
      <Kbd>
        K
      </Kbd>
      <Kbd>
        L
      </Kbd>
      <Kbd>
        Z
      </Kbd>
      <Kbd>
        X
      </Kbd>
      <Kbd>
        C
      </Kbd>
      <Kbd>
        V
      </Kbd>
      <Kbd>
        B
      </Kbd>
      <Kbd>
        N
      </Kbd>
      <Kbd>
        M
      </Kbd>
    </div>
  )
}

Number Keys#

Use this example to show a key inside a KBD component from the english numeral system.

Edit on GitHub

1234567890

React TypeScript

'use client';

import { Kbd } from 'flowbite-react';

export default function NumberKeysKBD() {
  return (
    <>
      <Kbd>
        1
      </Kbd>
      <Kbd>
        2
      </Kbd>
      <Kbd>
        3
      </Kbd>
      <Kbd>
        4
      </Kbd>
      <Kbd>
        5
      </Kbd>
      <Kbd>
        6
      </Kbd>
      <Kbd>
        7
      </Kbd>
      <Kbd>
        8
      </Kbd>
      <Kbd>
        9
      </Kbd>
      <Kbd>
        0
      </Kbd>
    </>
  )
}

Function keys#

This example can be used to denote function keys inside the KBD component.

Edit on GitHub

F1F2F3F4F5F6F7F8F9F10F11F12

React TypeScript

'use client';

import { Kbd } from 'flowbite-react';

export default function FunctionKeysKBD() {
  return (
    <div className="flex flex-wrap">
      <Kbd>
        F1
      </Kbd>
      <Kbd>
        F2
      </Kbd>
      <Kbd>
        F3
      </Kbd>
      <Kbd>
        F4
      </Kbd>
      <Kbd>
        F5
      </Kbd>
      <Kbd>
        F6
      </Kbd>
      <Kbd>
        F7
      </Kbd>
      <Kbd>
        F8
      </Kbd>
      <Kbd>
        F9
      </Kbd>
      <Kbd>
        F10
      </Kbd>
      <Kbd>
        F11
      </Kbd>
      <Kbd>
        F12
      </Kbd>
    </div>
  )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "px-2 py-1.5 mr-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500",
    "icon": "inline-block"
  }
}

References#

Flowbite Kbd

React KBD (Keyboard) - Flowbite

Table of Contents#

Default KBD#

KBD inside text#

KBD inside table#

Arrow keys#

Letter Keys#

Number Keys#

Function keys#

Theme#

References#

On this page