Kbd

component

A key of the keyboard, or the keys of a shortcut, on the native kbd element.

Preview

Light

Ctrl + K

Code

<twig:Kbd:Group><twig:Kbd>Ctrl</twig:Kbd> + <twig:Kbd>K</twig:Kbd></twig:Kbd:Group>

Dark

Ctrl + K

Code

<twig:Kbd:Group><twig:Kbd>Ctrl</twig:Kbd> + <twig:Kbd>K</twig:Kbd></twig:Kbd:Group>

Installation

php bin/console ux:install kbd --kit=github.com/parler-haut-interagir-librement/ux-kit

Accessibility

Screen readers read the keys as text: write their names, not only their symbols, or give a symbol a visually hidden name.

Files to copy

templates/components/Kbd.html.twig

<kbd data-slot="kbd"{{ attributes }}>
{##- The key, or a key's symbol. -#}
{%- block content %}{% endblock -%}
</kbd>

templates/components/Kbd/Group.html.twig

<kbd data-slot="kbd-group"{{ attributes.defaults({class: 'isKbdGroup'}) }}>
{##- The keys of one shortcut, each a `Kbd`. -#}
{%- block content %}{% endblock -%}
</kbd>