Kbd | Pol-ui - A beautiful and functional UI library for React and Next.js

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

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

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

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;
  };
}