Kbd
Displays keystrokes or keyboard shortcuts.
<dui-kbd-group>
<dui-kbd>⌘</dui-kbd>
<dui-kbd>⇧</dui-kbd>
<dui-kbd>⌥</dui-kbd>
<dui-kbd>⌃</dui-kbd>
</dui-kbd-group>
<dui-kbd-group>
<dui-kbd>Ctrl</dui-kbd>
<span>+</span>
<dui-kbd>B</dui-kbd>
</dui-kbd-group>Usage
<dui-kbd>...</dui-kbd>Examples
Basic
<div class="flex items-center gap-2">
<dui-kbd>Ctrl</dui-kbd>
<dui-kbd>⌘K</dui-kbd>
<dui-kbd>Ctrl + B</dui-kbd>
</div>Modifier Keys
<div class="flex items-center gap-2">
<dui-kbd>⌘</dui-kbd>
<dui-kbd>C</dui-kbd>
</div>Group
Use dui-kbd-group to group keyboard keys together.
<dui-kbd-group>
<dui-kbd>Ctrl</dui-kbd>
<dui-kbd>Shift</dui-kbd>
<dui-kbd>P</dui-kbd>
</dui-kbd-group>Arrow Keys
<div class="flex items-center gap-2">
<dui-kbd>↑</dui-kbd>
<dui-kbd>↓</dui-kbd>
<dui-kbd>←</dui-kbd>
<dui-kbd>→</dui-kbd>
</div>With Icons
<dui-kbd-group>
<dui-kbd>
<dui-icon name="circle-dashed"/>
</dui-kbd>
<dui-kbd>
<dui-icon name="arrow-left"/>
</dui-kbd>
<dui-kbd>
<dui-icon name="arrow-right"/>
</dui-kbd>
</dui-kbd-group>With Icons and Text
<dui-kbd-group>
<dui-kbd>
<dui-icon name="arrow-left"/>
Left
</dui-kbd>
<dui-kbd>
<dui-icon name="circle-dashed"/>
Voice Enabled
</dui-kbd>
</dui-kbd-group>Input Group
<dui-input-group>
<dui-input-group-input />
<dui-input-group-addon>
<dui-kbd>Space</dui-kbd>
</dui-input-group-addon>
</dui-input-group>Tooltip
<dui-tooltip>
<dui-tooltip-trigger>
<dui-button variant="ButtonVariant.Outline" size="ButtonSize.IconSmall">
<dui-icon name="save"/>
</dui-button>
</dui-tooltip-trigger>
<dui-tooltip-content class="pr-1.5">
<div class="flex items-center gap-2">
Save Changes
<dui-kbd>S</dui-kbd>
</div>
</dui-tooltip-content>
</dui-tooltip>