Shortcut

Stable

Indicate a shortcut for the user

<script setup lang="ts">
import { HShortcut } from '@holistics/design-system'

</script>

<template>
  <HShortcut>
    Esc
  </HShortcut>
</template>

Examples

Outline

<script setup lang="ts">
import { HShortcut } from '@holistics/design-system'

</script>

<template>
  <HShortcut
    outline
  >
    Esc
  </HShortcut>
</template>

Theme inheritance

HShortcut automatically adapts to the color mode (light or dark) of its parent container.

<script setup lang="ts">
import { HShortcut } from '@holistics/design-system'

</script>

<template>
  <div class="flex flex-col gap-4">
    <HShortcut>
      Esc
    </HShortcut>

    <HShortcut
      outline
    >
      Esc
    </HShortcut>
  </div>
</template>

API

Pass-through: <kbd>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
outline	boolean

Slots

Name	Scoped	Description
#default	{}