save-bar

One clear save action that stays on screen at the end of a long form.

Example

Saving keeps a draft.

Laravel

<form>
    <x-admin::input name="g_edit_me" label="Edit this field to see the status change" />
    <x-admin::save-bar status="Saving keeps a draft." class="mt" style="position:static">
        <x-admin::button variant="primary" type="button">Save draft</x-admin::button>
    </x-admin::save-bar>
</form>

Props

PropRequiredDefaultOptions
statusnull
dirty-textnull

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

Other stacks

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

HTML, for any stack
<form>
    <div class="adm-field">
            <label class="adm-label" for="g_edit_me">Edit this field to see the status change</label>
        <input
        type="text"
         name="g_edit_me"          id="g_edit_me"                                         class="adm-input"
    >
        </div>
    <div class="adm-save-bar mt" style="position:static;">
    <span class="adm-save-bar__status" data-adm-dirty-text="Unsaved changes">Saving keeps a draft.</span>
    <div class="adm-row"><button type="button" class="adm-btn adm-btn--primary" >Save draft</button></div>
</div>
</form>