Shortcut

Experimental

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>

Dark theme

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

</script>

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

    <HShortcut
      theme="dark"
      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 = false
theme	"light" | "dark" = "light"

Slots

Name	Scoped	Description
#default	{}