# Kbd

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Kbd>Shift + Tab</Kbd>
```

## API Reference

This component is based on the `kbd` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                                                                                   | Type                  | Default     |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`             | —           |
| `size`                                                                                                                                                                 | `Responsive<enum>`    | —           |
| `variant`The visual variant to apply, see [theme overview](/themes/docs/theme/overview#variants) for more details.                                                     | `"classic" \| "soft"` | `"classic"` |

## Examples

### Size

Use the `size` prop to control text size.

```jsx
<Flex direction="column" align="start" gap="3">

	<Kbd size="1">Shift + Tab</Kbd>

	<Kbd size="2">Shift + Tab</Kbd>

	<Kbd size="3">Shift + Tab</Kbd>

	<Kbd size="4">Shift + Tab</Kbd>

	<Kbd size="5">Shift + Tab</Kbd>

	<Kbd size="6">Shift + Tab</Kbd>

	<Kbd size="7">Shift + Tab</Kbd>

	<Kbd size="8">Shift + Tab</Kbd>

	<Kbd size="9">Shift + Tab</Kbd>

</Flex>
```