Kbd

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 nameTypeDefaultDescription
iconFC<ComponentProps<'svg'>>-The icon to be used in the Kbd component.
themeKbdTheme-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;
  };
}

Since February 21, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores