confirm · Admiral UI kit

Example

Laravel

<x-admin::toolbar>
    <x-admin::button data-adm-open="g-confirm">Publish</x-admin::button>
    <x-admin::button variant="destructive" data-adm-open="g-delete">Delete</x-admin::button>
</x-admin::toolbar>
<x-admin::confirm id="g-confirm" action="/publish" title="Publish this profile?" confirm="Publish">The public site updates within a few minutes.</x-admin::confirm>
<x-admin::confirm-delete id="g-delete" action="/segments/1" title="Delete segment?" confirm="Delete segment">Members stay in the connected platforms.</x-admin::confirm-delete>

Props

Prop	Required	Default
`id`	yes
`action`	yes
`title`	yes
`message`		`null`
`confirm`		`null`
`cancel`		`null`
`method`		`"POST"`
`variant`		`"primary"`

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

Other stacks

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

HTML, for any stack

<div class="adm-toolbar" role="toolbar"><button type="button" class="adm-btn adm-btn--secondary" data-adm-open="g-confirm" >Publish</button>
    <button type="button" class="adm-btn adm-btn--destructive" data-adm-open="g-delete" >Delete</button></div>
<dialog id="g-confirm" class="adm-dialog" aria-labelledby="g-confirm-title" role="alertdialog">
    <form method="POST" action="/publish"  >
                            <div class="adm-dialog__header">
            <h2 class="adm-heading" id="g-confirm-title">Publish this profile?</h2>
                            <p class="adm-subtle">The public site updates within a few minutes.</p>
                    </div>
        <div class="adm-dialog__footer">
            <button type="button" class="adm-btn adm-btn--secondary" data-adm-close>Cancel</button>
            <button type="submit" class="adm-btn adm-btn--primary" >Publish</button>
        </div>
</form>
</dialog>
<dialog id="g-delete" class="adm-dialog" aria-labelledby="g-delete-title" role="alertdialog">
    <form method="POST" action="/segments/1"  >
                            <input type="hidden" name="_method" value="DELETE">            <div class="adm-dialog__header">
            <h2 class="adm-heading" id="g-delete-title">Delete segment?</h2>
                            <p class="adm-subtle">Members stay in the connected platforms.</p>
                    </div>
        <div class="adm-dialog__footer">
            <button type="button" class="adm-btn adm-btn--secondary" data-adm-close>Cancel</button>
            <button type="submit" class="adm-btn adm-btn--destructive" >Delete segment</button>
        </div>
</form>
</dialog>