# Kbd (/components/typography/kbd)



`Kbd` marks keyboard input, such as a shortcut or a key name. It renders a native `kbd` element,
which conveys keyboard-input semantics to assistive technology, and uses the theme's fixed code
font.

apps/docs/src/examples/kbd/basic.tsx

```tsx
import { Kbd } from '@luke-ui/react/kbd';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Text>
			Press <Kbd>Shift + Tab</Kbd> to move to the previous control.
		</Text>
	);
};
```

## API [#api]

<ComponentPropsTable
  id="type-table-kbd.tsx-KbdProps"
  type="{
  &#x22;id&#x22;: &#x22;kbd.tsx-KbdProps&#x22;,
  &#x22;name&#x22;: &#x22;KbdProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for the `Kbd` component.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`KbdProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>