v2.5.1
Discord
Source code

Kbd

Display keyboard button or keys combination
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 } from '@mantine/core';
import { MagnifyingGlassIcon } from '@modulz/radix-icons';


function Demo() {
  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}
      styles={{ rightSection: { pointerEvents: 'none' } }}
    />
  );
}
Build fully functional accessible web applications with ease
Project
Contribute to MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter