Kbd

Display keyboard keys or shortcuts in a styled inline element.

Import


import { Kbd } from '@tidbcloud/uikit'

Basic Usage


import { Kbd } from '@tidbcloud/uikit'
 
function Demo() {
  return <Kbd>Shift</Kbd>
}

Keyboard Shortcuts

Display key combinations:


import { Kbd } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <Kbd>⌘</Kbd> + <Kbd>K</Kbd>
    </>
  )
}

With Text

Combine with text for instructions:


import { Kbd, Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Text>
      Press <Kbd>⌘</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd> to open command palette
    </Text>
  )
}

Different Sizes


import { Kbd, Stack } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Stack>
      <div>
        <Kbd size="xs">Ctrl</Kbd> - Extra small
      </div>
      <div>
        <Kbd size="sm">Ctrl</Kbd> - Small
      </div>
      <div>
        <Kbd size="md">Ctrl</Kbd> - Medium
      </div>
      <div>
        <Kbd size="lg">Ctrl</Kbd> - Large
      </div>
      <div>
        <Kbd size="xl">Ctrl</Kbd> - Extra large
      </div>
    </Stack>
  )
}

Key Props

Prop	Type	Description
`size`	`MantineSize \| number`	Controls font-size and padding
`children`	`ReactNode`	Key text to display