Kbd

Display keyboard shortcuts or key commands

Use the Kbd component to display keyboard shortcuts or key commands in a visually distinct way. Use them to display keyboard shortcuts in documentation or tooltips, highlight key commands for faster navigation in your apps, or to assist your users in learning quick actions for common tasks.

---
import { Kbd } from 'webcoreui/astro'
---

<Kbd keys={['cmd', 'shift']}>K</Kbd>

<script>
    import { Kbd } from 'webcoreui/svelte'
</script>

<Kbd keys={['cmd', 'shift']}>K</Kbd>

import React from 'react'
import { Kbd } from 'webcoreui/react'

const Component = () => (
    <Kbd keys={['cmd', 'shift']}>K</Kbd>
)

export default Component

To specify keyboard icons, pass an array of keywords for the keys prop. You can also create the component without any keys, or without any text:

<Kbd>K</Kbd>

<Kbd keys={['cmd']} />

For a full list of available keywords, see the API reference below.

API

type KbdProps = {
    keys?: ('cmd'
        | 'shift'
        | 'ctrl'
        | 'option'
        | 'enter'
        | 'del'
        | 'esc'
        | 'tab'
        | 'capslock'
        | 'up'
        | 'down'
        | 'left'
        | 'right'
        | 'pageup'
        | 'pagedown'
        | 'home'
        | 'end'
        | 'help'
        | 'space')[]
    className?: string
}