ShortcutsItem

ShortcutsItem is part of the Containers set, imported from @jcsoftdev/ui/containers.

Import

import { ShortcutsItem } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/shortcuts.

Usage

<ShortcutsItem aria-label="Quick links">
  <>
          <ShortcutsItem href="#students" icon={<Users />} kbd="G S">
            Students
          </ShortcutsItem>
          <ShortcutsItem href="#calendar" icon={<Calendar />} count={4}>
            Calendar
          </ShortcutsItem>
        </>
</ShortcutsItem>

Props

Prop	Type	Default	Description
icon	ReactNode		Decorative glyph before the label.
kbd	string		Keyboard hint at the end (G P, ⌘K).
count	ReactNode		Count or badge at the end.
asChild	boolean	false	Renders the single child element (a router Link, say) with the item’s look instead of an anchor. Without href and without asChild the item is a <button>.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Actions Are Buttons
• As Child With Router Link

Source

packages/ui/src/containers/shortcuts/shortcuts.tsx