dialog · Admiral UI kit

Example

Laravel

<x-admin::button data-adm-open="g-dialog">Open dialog</x-admin::button>
<x-admin::button data-adm-open="g-dialog-lg">Open a large dialog</x-admin::button>
<x-admin::dialog id="g-dialog-lg" size="lg" title="Preview members" description="The first 25 members who match.">
    Wider, for tables and previews. Sizes: sm, md (default), lg, xl, full.
    <x-slot:footer><x-admin::button data-adm-close>Close</x-admin::button></x-slot:footer>
</x-admin::dialog>
<x-admin::dialog id="g-dialog" title="New segment" description="Members are pushed on the next run.">
    <x-admin::input name="g_dialog_name" label="Name" />
    <x-slot:footer>
        <x-admin::button data-adm-close>Cancel</x-admin::button>
        <x-admin::button variant="primary">Create segment</x-admin::button>
    </x-slot:footer>
</x-admin::dialog>

Props

Prop	Required	Default	Options
`id`	yes
`title`		`null`
`description`		`null`
`size`		`"md"`	sm, md, lg, xl, full

Slots: footer

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

Other stacks

React and Vue: import { Dialog } 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" data-adm-open="g-dialog" >Open dialog</button>
<button type="button" class="adm-btn adm-btn--secondary" data-adm-open="g-dialog-lg" >Open a large dialog</button>
<dialog id="g-dialog-lg" class="adm-dialog adm-dialog--lg"  aria-labelledby="g-dialog-lg-title" >
            <div class="adm-dialog__header">
            <h2 class="adm-heading" id="g-dialog-lg-title">Preview members</h2>            <p class="adm-subtle">The first 25 members who match.</p>        </div>
        <div class="adm-dialog__body">Wider, for tables and previews. Sizes: sm, md (default), lg, xl, full.</div>    <div class="adm-dialog__footer"><button type="button" class="adm-btn adm-btn--secondary" data-adm-close="data-adm-close" >Close</button></div></dialog>
<dialog id="g-dialog" class="adm-dialog"  aria-labelledby="g-dialog-title" >
            <div class="adm-dialog__header">
            <h2 class="adm-heading" id="g-dialog-title">New segment</h2>            <p class="adm-subtle">Members are pushed on the next run.</p>        </div>
        <div class="adm-dialog__body"><div class="adm-field">
            <label class="adm-label" for="g_dialog_name">Name</label>
        <input
        type="text"
         name="g_dialog_name"          id="g_dialog_name"                                         class="adm-input"
    >
        </div></div>    <div class="adm-dialog__footer"><button type="button" class="adm-btn adm-btn--secondary" data-adm-close="data-adm-close" >Cancel</button>
        <button type="button" class="adm-btn adm-btn--primary" >Create segment</button></div></dialog>