# ShortcutsItem

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

Source: https://ui.jcsoftdev.com/docs/components/shortcuts-item

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

## Import

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-shortcuts--default)
- [Actions Are Buttons](/storybook/?path=/story/containers-shortcuts--actions-are-buttons)
- [As Child With Router Link](/storybook/?path=/story/containers-shortcuts--as-child-with-router-link)

## Source

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