StellarAdmin

Kbd

Displays keystrokes or keyboard shortcuts.

<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

<sa-kbd>...</sa-kbd>

Examples

Group

Use sa-kbd-group to group keyboard keys together.

<p class="text-muted-foreground text-sm">
    Use
    <sa-kbd-group>
        <sa-kbd>Ctrl + B</sa-kbd>
        <sa-kbd>Ctrl + K</sa-kbd>
    </sa-kbd-group>
    to open the command palette
</p>

Button

Combine with buttons to indicate keys that trigger the button.

<sa-button variant="Outline" size="Small" class="pr-2">
    Accept <sa-kbd>&#9166;</sa-kbd>
</sa-button>
<sa-button variant="Outline" size="Small" class="pr-2">
    Cancel <sa-kbd>Esc</sa-kbd>
</sa-button>

Item

Previous Page

Separator

Next Page

On this page

UsageExamplesGroupButton