Components / Navigation
Command launcher
The launcher of a palette, and the rows of a palette that is not cmdk.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { CommandTrigger, CommandOptionList, CommandOption } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
CommandTrigger label / name / icon | ReactNode / string | The visible text; the accessible name when it must say more (it should contain the label); a decorative icon (a magnifier by default). |
CommandTrigger keys / sequence / shortcut | string[] / boolean / string | false | Key caps, "mod" being the main modifier resolved after hydration (Ctrl on the server). aria-keyshortcuts is derived from them (Control+K Meta+K) and constant; false omits it. sequence shows "G then K" and derives none, because aria-keyshortcuts cannot express steps. |
CommandTrigger variant | secondary | outline | ... | The button's look; secondary (a grey fill) by default. outline is the card fill and hairline of a launcher that looks like a field. Every other Button variant is accepted. |
CommandTrigger compact | boolean | Icon only at any width. Inside a container named command narrower than 12rem (the command slot of AppHeader) it is icon-only without the prop. The key hint hides on coarse pointers. |
CommandTrigger fit | boolean | The width of its content instead of its container's. The launcher fills its container by default, which is wrong in a group of automatic width (a percentage that depends on the child is cyclic). The actions of SiteHeader are such a group and size it this way already, icon only under 40rem; use fit anywhere else. |
CommandOption active / disabled | boolean | active is the virtual focus (aria-selected, data-active): accent fill and a 2 px Stormlight bar. disabled sets aria-disabled and mutes the label but stays selectable, so activating it can say why. |
CommandOption icon / label / detail / group / reason / keys | ReactNode | The slots. Below 32rem of list width the label takes its own line, then detail and group, then the reason. |
Behavior
The launcher is a secondary button with the 3:1 control boundary, because it looks like the field it opens. The option list is a tabIndex -1 listbox: the input that drives it holds the focus and names the active row with aria-activedescendant. Set --fui-command-list-max (20rem by default) to none when a parent gives it a height.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.