command-trigger

A search-looking button that opens the command palette.

Example

Esc
Pages
Segments Perks Settings

Laravel

<x-admin::command-trigger for="g-command" />
<x-admin::command-palette id="g-command" :groups="[['label' => 'Pages', 'items' => [
    ['label' => 'Segments', 'href' => '#', 'icon' => 'layers', 'keywords' => 'audience groups'],
    ['label' => 'Perks', 'href' => '#', 'icon' => 'gift'],
    ['label' => 'Settings', 'href' => '#', 'icon' => 'settings'],
]]]" />

Props

PropRequiredDefaultOptions
for"adm-command"
labelnull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { CommandTrigger } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<button type="button" class="adm-btn adm-btn--secondary adm-command-trigger" data-adm-open="g-command">
    <span class="adm-row"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="adm-command-trigger__label">Search</span></span><kbd class="adm-kbd">⌘K</kbd>
</button>
<dialog id="g-command" class="adm-dialog adm-command" data-adm-command aria-label="Search">
    <div class="adm-command__search">
        <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>        <input class="adm-command__input" type="text" placeholder="Search pages…" aria-label="Search pages…" autocomplete="off" spellcheck="false">
        <kbd class="adm-kbd">Esc</kbd>
    </div>
    <div class="adm-command__list">
                    <div class="adm-command__group">Pages</div>                                            <a class="adm-command__item" href="#"  data-keywords="audience groups" >
                    <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg>                    <span>Segments</span>
                </a>
                                            <a class="adm-command__item" href="#" >
                    <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5"/></svg>                    <span>Perks</span>
                </a>
                                            <a class="adm-command__item" href="#" >
                    <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/></svg>                    <span>Settings</span>
                </a>
                            <div class="adm-command__empty" hidden>Nothing found</div>
    </div>
</dialog>