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 pol-ui:
import { Kbd } from "pol-ui";
Default KBD
Default KBD
import { Kbd } from "pol-ui";
import React from "react";
const KbdComponent = () => {
return <Kbd>Shift</Kbd>;
};
export default KbdComponent;
Props
The Kbd component has the following props:
Prop name | Type | Default | Description |
---|---|---|---|
icon | FC<ComponentProps<'svg'>> | - | The icon to be used in the Kbd component. |
theme | KbdTheme | - | The theme to be used in the Kbd component. |
💡
You can also provide any prop comming from the HTML span tag.
Examples
Only Icon
Only Icon
import { Kbd } from "pol-ui";
import { MdKeyboardArrowDown } from "react-icons/md";
import React from "react";
const KbdComponent = () => {
return <Kbd icon={MdKeyboardArrowDown}>command</Kbd>;
};
export default KbdComponent;
With Icon
With Icon
import { Kbd } from "pol-ui";
import { MdKeyboardArrowDown } from "react-icons/md";
import React from "react";
const KbdComponent = () => {
return <Kbd icon={MdKeyboardArrowDown} />;
};
export default KbdComponent;
Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface KbdTheme {
root: {
base: string;
icon: string;
};
}