Kbd

Display keyboard button or keys combination
Import

Usage

+ shift + M
import { Kbd } from '@mantine/core';
function Demo() {
return (
<>
<Kbd></Kbd> + <Kbd>shift</Kbd> + <Kbd>M</Kbd>
</>
);
}

Example

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

Download more icon variants from https://tabler-icons.io/i/search
Ctrl+K
import { Kbd, TextInput } from '@mantine/core';
import { IconSearch } from '@tabler/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={<IconSearch size={16} />}
rightSectionWidth={90}
rightSection={rightSection}
styles={{ rightSection: { pointerEvents: 'none' } }}
/>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Kbd component props

NameTypeDescription
children *
ReactNode
Keyboard key