Kbd

Display keyboard button or keys combination
Import

Usage

+ 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 { 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 faster than ever
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