KbdDisplay keyboard button or keys combinationImportimport { Kbd } from '@mantine/core';SourceView source codeDocsEdit this pagePackage@mantine/coreDocumentationComponent propsUsage⌘ + shift + Mimport { Kbd } from '@mantine/core'; function Demo() { return ( <> <Kbd>⌘</Kbd> + <Kbd>shift</Kbd> + <Kbd>M</Kbd> </> );}ExampleUsage example with TextInput component – Kbd is used to describe keyboard shortcut to focus input:Ctrl+Kimport { 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' } }} /> );}Go backIndicator – @mantine/coreUp nextSpoiler – @mantine/coreTable of contentsUsageExampleKbd component propsNameTypeDescriptionchildren *ReactNodeKeyboard keyBuild fully functional accessible web applications faster than everAboutContributeAbout MantineChangelogReleasesCommunityChat on DiscordFollow on TwitterFollow on GithubGitHub discussionsProjectMantine UIDocumentationGithub organizationnpm organizationBuilt by Vitaly Rtishchev and these awesome peopleJoin Discord communityFollow Mantine on Twitter