mds components
mds:command
A ⌘K command palette — an open version of a Flux Pro component.
Flux's Command component is Pro-only. This is a working replacement with keyboard navigation, a ⌘K shortcut and search that handles Persian text as comfortably as Latin. The preview is live — type in it.
Navigation
Actions
No results found.
<mds:command class="max-w-md">
<mds:command.input placeholder="Search commands..." clearable />
<mds:command.items>
<mds:command.heading>Navigation</mds:command.heading>
<mds:command.item icon="shopping-bag" kbd="⌘O">My orders</mds:command.item>
<mds:command.item icon="heart" kbd="⌘F">Favorites</mds:command.item>
<mds:command.item icon="map-pin">My addresses</mds:command.item>
<mds:command.heading>Actions</mds:command.heading>
<mds:command.item icon="truck" kbd="⌘T">Track shipment</mds:command.item>
<mds:command.item icon="arrow-right-start-on-rectangle">Sign out</mds:command.item>
</mds:command.items>
</mds:command>Inside a modal
The usual shape: a bare modal opened by ⌘K.
<flux:modal.trigger name="global-search" shortcut="cmd.k">
<flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" class="max-w-md" />
</flux:modal.trigger>
<flux:modal name="global-search" variant="bare" class="w-full max-w-md">
<mds:command>
<mds:command.input placeholder="Search everywhere..." closable autofocus />
<mds:command.items>
<mds:command.heading>Suggestions</mds:command.heading>
<mds:command.item icon="fire">Today's deals</mds:command.item>
<mds:command.item icon="device-phone-mobile">Mobile phones</mds:command.item>
</mds:command.items>
</mds:command>
</flux:modal>Items as links
<mds:command class="max-w-md">
<mds:command.input placeholder="Search pages..." />
<mds:command.items>
<mds:command.item icon="home" href="#">Dashboard</mds:command.item>
<mds:command.item icon="cog-6-tooth" href="#">Settings</mds:command.item>
</mds:command.items>
</mds:command>Persian output
The built-in microcopy — the empty message and the clear/close button labels — follows config('mds.persian_digits'), which is on by default in a real app and off in these docs. There is no fa prop here, so to force Persian on one palette pass the string props (empty, clear-label, close-label) as this example does.
ناوبری
نتیجهای یافت نشد.
<mds:command class="max-w-md">
<mds:command.input placeholder="جستجوی فرمان..." clearable clear-label="پاک کردن" />
<mds:command.items empty="نتیجهای یافت نشد.">
<mds:command.heading>ناوبری</mds:command.heading>
<mds:command.item icon="shopping-bag" kbd="⌘O">سفارشهای من</mds:command.item>
<mds:command.item icon="heart" kbd="⌘F">علاقهمندیها</mds:command.item>
<mds:command.item icon="truck" kbd="⌘T">پیگیری مرسوله</mds:command.item>
</mds:command.items>
</mds:command>Reference
mds:command
The palette shell. Takes no props.
mds:command.input
| Prop | Description |
|---|---|
| placeholder | Placeholder text. |
| icon | Leading icon. Default: magnifying-glass. |
| clearable | Adds a clear button. Default: false. |
| closable | Adds a close button, for use inside a modal. Default: false. |
| autofocus | Focuses the field on open. |
| clear-label | Accessible label for the clear button. Default: "Clear", or پاک کردن in Persian. |
| close-label | Accessible label for the close button. Default: "Close", or بستن in Persian. |
mds:command.items
| Prop | Description |
|---|---|
| empty | Message shown when the search matches nothing. Default: "No results found.", or نتیجهای یافت نشد. in Persian. |
mds:command.heading
A group label inside the list.
mds:command.item
| Prop | Description |
|---|---|
| icon | Leading icon name. |
| kbd | Keyboard shortcut hint on the trailing edge. |
| href | Renders the item as a link. |