v6.0.35

Kbd

Display keyboard button or keys combination
Import

Usage

+ shift + M
import { Kbd } from '@asuikit/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:

Ctrl+K
import { Kbd, TextInput, Flex } from '@asuikit/core';
import { IconSearch } from '@tabler/icons-react';
function Demo() {
const rightSection = (
<Flex align="center">
<Kbd mr={5}>Ctrl</Kbd>
<span>+</span>
<Kbd ml={5}>K</Kbd>
</Flex>
);
return (
<TextInput
placeholder="Search"
icon={<IconSearch size="1rem" />}
rightSectionWidth={90}
rightSection={rightSection}
styles={{ rightSection: { pointerEvents: 'none' } }}
/>
);
}

Kbd component props

NameTypeDescription
children *
ReactNode
Keyboard key
size
"xs" | "sm" | "md" | "lg" | "xl"
Controls component size, 'sm' by default