Kbd

Display keyboard button

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Use kbd html element to describe keyboard actions and shortcuts:

⌘ + shift + M

<Kbd>⌘</Kbd> + <Kbd>shift</Kbd> + <Kbd>M</Kbd>

Example

Usage example with TextInput component – Kbd is used to describe keyboard shortcut to focus input:

Ctrl+K

import React from 'react';
import { Kbd, TextInput, useMantineTheme } from '@mantine/core';
import { MagnifyingGlassIcon } from '@modulz/radix-icons';

function Demo() {
  const theme = useMantineTheme();

  const rightSection = (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Kbd>Ctrl</Kbd>
      <span style={{ margin: '0 5px' }}>+</span>
      <Kbd>K</Kbd>
    </div>
  );

  return (
    <TextInput
      placeholder="Search"
      icon={<MagnifyingGlassIcon />}
      rightSectionWidth={90}
      rightSection={rightSection}
      rightSectionProps={{ style: { pointerEvents: 'none' } }}
      variant={theme.colorScheme === 'dark' ? 'filled' : 'default'}
    />
  );
}