Pillar UI React Kbd Component documentation

Provide visual cues for keyboard input with a customizable Kbd component for React. Display keyboard shortcuts and commands in a clear and intuitive format.

Components:

Kbd

Type

Components

import

import { Pillar UI React Kbd Component } from '@pillar-ui/core'
Go To kbd Source CodeIssuesdiscussions

Props

The following are the props that can be used with the Kbd component:

Title

The title prop is used to specify the text or label of the keyboard key.

Example:

Esc
<Kbd title="Esc" />

Color

  • Type: string
  • Default: primary
  • Options: danger | warning | success | primary | bgce | primary | secondary

The color prop is used to specify the background color of the Kbd component. It supports various color options.

EscEscEscEscEscEscEsc
<Kbd title="Esc" />
<Kbd title="Esc" color="dan" />
<Kbd title="Esc" color="suc" />
<Kbd title="Esc" color="war" />
<Kbd title="Esc" color="pri" />
<Kbd title="Esc" color="bgce" />
<Kbd title="Esc" color="sec" />

Size

  • Type: string
  • Default: md
  • Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop is used to specify the size of the Kbd component. It supports various size options.

EscEscEscEscEscEscEscEsc
<Kbd title="Esc" />
<Kbd title="Esc" size="2xs" />
<Kbd title="Esc" size="xs" />
<Kbd title="Esc" size="sm" />
<Kbd title="Esc" size="md" />
<Kbd title="Esc" size="lg" />
<Kbd title="Esc" size="xl" />
<Kbd title="Esc" size="2xl" />

Corner

The corner prop is used to specify the corner style of the Kbd component. It supports various corner options.

EscEscEscEscEscEscEsc
<Kbd title="Esc" corner="sharp" />
<Kbd title="Esc" />
<Kbd title="Esc" corner="xs" />
<Kbd title="Esc" corner="md" />
<Kbd title="Esc" corner="xl" />
<Kbd title="Esc" corner="full" />
<Kbd title="Esc" corner="circle" />

Variant

The variant prop is used to specify the style of the KDB component. It supports the following style options: solid, outline, and soft.

Example:

EscEscEscEscEscEscEsc
EscEscEscEscEscEscEsc
EscEscEscEscEscEscEsc
EscEscEscEscEscEscEsc
<Paper as={Flex} gap="sm" items="center" borderColor="opa-6" ="sm" flow="sm" background="bg-3" corner="sm">
  <Flex gap="sm">
    <Kbd title="Esc" variant="solid" />
    <Kbd title="Esc" variant="solid" color="dan" />
    <Kbd title="Esc" variant="solid" color="suc" />
    <Kbd title="Esc" variant="solid" color="war" />
    <Kbd title="Esc" variant="solid" color="pri" />
    <Kbd title="Esc" variant="solid" color="bg" />
    <Kbd title="Esc" variant="solid" color="sec" />
  </Flex>
  <Flex gap="sm">
    <Kbd title="Esc" variant="outline" />
    <Kbd title="Esc" variant="outline" color="dan" />
    <Kbd title="Esc" variant="outline" color="suc" />
    <Kbd title="Esc" variant="outline" color="war" />
    <Kbd title="Esc" variant="outline" color="pri" />
    <Kbd title="Esc" variant="outline" color="bg" />
    <Kbd title="Esc" variant="outline" color="sec" />
  </Flex>
  <Flex gap="sm">
    <Kbd title="Esc" variant="mixed" />
    <Kbd title="Esc" variant="mixed" color="dan" />
    <Kbd title="Esc" variant="mixed" color="suc" />
    <Kbd title="Esc" variant="mixed" color="war" />
    <Kbd title="Esc" variant="mixed" color="pri" />
    <Kbd title="Esc" variant="mixed" color="bg" />
    <Kbd title="Esc" variant="mixed" color="sec" />
  </Flex>
  <Flex gap="sm">
    <Kbd title="Esc" variant="soft" />
    <Kbd title="Esc" variant="soft" color="dan" />
    <Kbd title="Esc" variant="soft" color="suc" />
    <Kbd title="Esc" variant="soft" color="war" />
    <Kbd title="Esc" variant="soft" color="pri" />
    <Kbd title="Esc" variant="soft" color="bg" />
    <Kbd title="Esc" variant="soft" color="sec" />
  </Flex>
</Paper>

Use Case

The Kbd component can be used to represent keyboard keys or shortcuts in a user interface. It can be used in documentation, tutorials, or any other context where keyboard-related information needs to be displayed.

Troubleshooting

If you encounter any issues with the Kbd component, make sure that you have correctly passed the props and values. If you are still having issues, check the console for any error messages.

Conclusion

The Kbd component is a useful UI component for displaying keyboard keys or shortcuts. It provides customization options for color, size, and corner style, allowing it to be integrated seamlessly into various UI designs.