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:
Type
import
import { Pillar UI React Kbd Component } from '@pillar-ui/core'
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:
<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.
<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.
<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.
<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:
<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.