Featured
DocksmacOS Magnify Dock
A floating icon dock whose items swell under the pointer, the neighbours lifting less than the one you are on.
#dock#magnify#hover
6 frameworksAdvanced
Loading…
A horizontal strip of command buttons, each with a visible label and a shortcut hint.
<!--
A strip of command buttons. Each shows its visible label (its accessible name)
plus a kbd shortcut hint, mirrored into aria-keyshortcuts so the shortcut is
announced too. The kbd only appears at >= sm; the strip itself scrolls
(overflow-x-auto) rather than overflowing the page at 320px.
-->
<div class="fixed bottom-6 left-1/2 w-full max-w-[calc(100vw-2rem)] -translate-x-1/2">
<div role="toolbar" aria-label="Commands" class="mx-auto flex w-max max-w-full items-center gap-1 overflow-x-auto rounded-2xl border border-black/10 bg-white/90 p-1.5 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.4)] backdrop-blur-md dark:border-white/10 dark:bg-gray-900/90">
<button type="button" aria-keyshortcuts="Ctrl+K" class="flex min-h-10 shrink-0 items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm9 16-3.6-3.6" /></svg>
Search
<kbd aria-hidden="true" class="hidden rounded border border-black/10 bg-black/5 px-1.5 py-0.5 text-[0.625rem] font-semibold text-gray-500 sm:inline dark:border-white/10 dark:bg-white/10 dark:text-gray-400">Ctrl+K</kbd>
</button>
<button type="button" aria-keyshortcuts="Ctrl+N" class="flex min-h-10 shrink-0 items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14" /></svg>
New
<kbd aria-hidden="true" class="hidden rounded border border-black/10 bg-black/5 px-1.5 py-0.5 text-[0.625rem] font-semibold text-gray-500 sm:inline dark:border-white/10 dark:bg-white/10 dark:text-gray-400">Ctrl+N</kbd>
</button>
<button type="button" aria-keyshortcuts="C" class="flex min-h-10 shrink-0 items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-5 4Z" /></svg>
Comment
<kbd aria-hidden="true" class="hidden rounded border border-black/10 bg-black/5 px-1.5 py-0.5 text-[0.625rem] font-semibold text-gray-500 sm:inline dark:border-white/10 dark:bg-white/10 dark:text-gray-400">C</kbd>
</button>
<button type="button" aria-keyshortcuts="Ctrl+S" class="flex min-h-10 shrink-0 items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13" /></svg>
Share
<kbd aria-hidden="true" class="hidden rounded border border-black/10 bg-black/5 px-1.5 py-0.5 text-[0.625rem] font-semibold text-gray-500 sm:inline dark:border-white/10 dark:bg-white/10 dark:text-gray-400">Ctrl+S</kbd>
</button>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
commands | readonly Command[] | DEFAULT_COMMANDS | The array of items to render. |
onSelect | (id: string) => void | - | Fired with the menu item the user chose. |
ariaLabel | string | 'Commands' | The button's accessible name. Required for icon-only buttons. |
className | string | - | Additional classes merged onto the root element. |
Each button shows its label (its accessible name) plus a `kbd` shortcut mirrored into `aria-keyshortcuts`, so the shortcut is announced too. The kbd hint only appears at `sm` and up, and the strip scrolls with `overflow-x-auto` rather than overflowing the page at 320px.