Qwik kbd - 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-qwik :

import { Kbd } from "flowbite-qwik"

Default KBD

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

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Kbd } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-1">
      <Kbd>Shift</Kbd>
      <Kbd>Ctrl</Kbd>
      <Kbd>Tab</Kbd>
      <Kbd>Caps Lock</Kbd>
      <Kbd>Esc</Kbd>
      <Kbd>Spacebar</Kbd>
      <Kbd>Enter</Kbd>
    </div>
  )
})

KBD inside text

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

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Kbd } from 'flowbite-qwik'

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

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
tsx
import { component$ } from '@builder.io/qwik'
import { Kbd, Table } from 'flowbite-qwik'
import { IconAngleDownSolid, IconAngleLeftSolid, IconAngleRightSolid, IconAngleUpSolid } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <Table>
      <Table.Head>
        <Table.HeadCell>Key</Table.HeadCell>
        <Table.HeadCell>Description</Table.HeadCell>
      </Table.Head>
      <Table.Body class="divide-y">
        <Table.Row class="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell class="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <Kbd>Shift</Kbd> <span>or</span> <Kbd>Tab</Kbd>
          </Table.Cell>
          <Table.Cell>Navigate to interactive elements</Table.Cell>
        </Table.Row>
        <Table.Row class="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell class="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <Kbd>Enter</Kbd> or <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 class="bg-white dark:border-gray-700 dark:bg-gray-800">
          <Table.Cell class="whitespace-nowrap font-medium text-gray-900 dark:text-white">
            <span class="inline-flex gap-1">
              <Kbd icon={IconAngleUpSolid} />
              <Kbd icon={IconAngleDownSolid} />
            </span>
            <span> or </span>
            <span class="inline-flex gap-1">
              <Kbd icon={IconAngleLeftSolid} />
              <Kbd icon={IconAngleRightSolid} />
            </span>
          </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
tsx
import { component$ } from '@builder.io/qwik'
import { Kbd } from 'flowbite-qwik'
import { IconAngleDownSolid, IconAngleLeftSolid, IconAngleRightSolid, IconAngleUpSolid } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-1">
      <Kbd icon={IconAngleUpSolid} />
      <Kbd icon={IconAngleDownSolid} />
      <Kbd icon={IconAngleLeftSolid} />
      <Kbd icon={IconAngleRightSolid} />
    </div>
  )
})

Letter Keys

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

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Kbd } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-1">
      <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
tsx
import { component$ } from '@builder.io/qwik'
import { Kbd } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-1">
      <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>
    </div>
  )
})

Function keys

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

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Kbd } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-1">
      <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>
  )
})