Kbd
Displays keystrokes or keyboard shortcuts
Theme
<sa-kbd-group>
<sa-kbd>⌘</sa-kbd>
<sa-kbd>⇧</sa-kbd>
<sa-kbd>⌥</sa-kbd>
<sa-kbd>⌃</sa-kbd>
</sa-kbd-group>
<sa-kbd-group>
<sa-kbd>Ctrl</sa-kbd>
<span>+</span>
<sa-kbd>B</sa-kbd>
</sa-kbd-group>Usage
Wrap a key name in <sa-kbd>. Use <sa-kbd-group> for combinations.
<sa-kbd>...</sa-kbd>Examples
Basic
Single keys, and combinations either inside one <sa-kbd> or as separate keys.
Theme
<div class="flex items-center gap-2">
<sa-kbd>Ctrl</sa-kbd>
<sa-kbd>⌘K</sa-kbd>
<sa-kbd>Ctrl + B</sa-kbd>
</div>Modifier keys
Modifier symbols such as ⌘ render like any other key.
Theme
<div class="flex items-center gap-2">
<sa-kbd>⌘</sa-kbd>
<sa-kbd>C</sa-kbd>
</div>Group
Use <sa-kbd-group> to group keyboard keys together.
Theme
<sa-kbd-group>
<sa-kbd>Ctrl</sa-kbd>
<sa-kbd>Shift</sa-kbd>
<sa-kbd>P</sa-kbd>
</sa-kbd-group>Arrow keys
Arrow symbols work the same way.
Theme
<div class="flex items-center gap-2">
<sa-kbd>↑</sa-kbd>
<sa-kbd>↓</sa-kbd>
<sa-kbd>←</sa-kbd>
<sa-kbd>→</sa-kbd>
</div>With icons
An <sa-icon> can stand in for a key symbol.
Theme
<sa-kbd-group>
<sa-kbd>
<sa-icon name="circle-dashed"/>
</sa-kbd>
<sa-kbd>
<sa-icon name="arrow-left"/>
</sa-kbd>
<sa-kbd>
<sa-icon name="arrow-right"/>
</sa-kbd>
</sa-kbd-group>With icons and text
Icons and text can be combined in one key.
Theme
<sa-kbd-group>
<sa-kbd>
<sa-icon name="arrow-left"/>
Left
</sa-kbd>
<sa-kbd>
<sa-icon name="corner-down-left"/>
Enter
</sa-kbd>
</sa-kbd-group>Input group
Show a shortcut hint inside an Input Group addon.
Theme
<sa-input-group>
<sa-input-group-input />
<sa-input-group-addon>
<sa-kbd>Space</sa-kbd>
</sa-input-group-addon>
</sa-input-group>Tooltip
Show the shortcut for an action inside its Tooltip.
Theme
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.IconSmall" interestfor="--kbd-tooltip" aria-label="Save changes">
<sa-icon name="save"/>
</sa-button>
<sa-tooltip id="--kbd-tooltip" class="pr-1.5">
<div class="flex items-center gap-2">
Save Changes
<sa-kbd>S</sa-kbd>
</div>
</sa-tooltip>API Reference
<sa-kbd>
Renders a <kbd> element representing a single key.
<sa-kbd-group>
Renders a <kbd> element that groups multiple keys together.