DXSaveButton

A save button that confirms the save in place. While saving it shows DButton’s busy state; once saved it changes to a disabled ✓ Saved (tick, same colour as before: a disabled button is normally grey, but this one keeps its own variant at full strength, so only the label and the disabled state change); when the form changes it goes back to the normal Save button.

DXForm uses it for its submit button and works out saving and saved itself. For a form you build yourself, drive it with two booleans: set saving while the request runs, set saved when it succeeds, and clear saved whenever the data changes.

<DXSaveButton type="submit" :saving="isSaving" :saved="isSaved">Save</DXSaveButton>

Live Examples

Driven by two booleans

Save, then type in the field: the button reads "✓ Saved" until something changes.

The three states

Props

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
`saving`	`boolean`	No	`false`	A save is in flight: disabled at once, spinner after the anti-flash delay (DButton loading). Wins over saved, so a re-save shows busy.
`saved`	`boolean`	No	`false`	The current contents are saved: shows savedText with a tick and a real disabled attribute, in the button's own variant colours (not grey, not faded). Clear it when the data changes.
`savedText`	`string`	No	`"Saved"`	Label in the saved state.
`savingText`	`string`	No	-	Label beside the spinner while saving (DButton loadingText). Omit to keep the normal label.
`variant`	`ButtonVariant \| null`	No	`"primary"`	Variant in every state, including saved.
`icon`	`string`	No	-	Leading Bootstrap Icons glyph when not saved. The saved state shows check-lg.
`disabled`	`boolean`	No	`false`	Disable the button in any state.

Every other attribute and listener (type, block, size, class, spinnerDelay, @click, …) passes through to DButton.

Slots

Name Click to sort ascending	Description	Scoped Props
`default`	The normal (and saving) label. Defaults to "Save".	-

Accessibility

The button is a polite live region (aria-live="polite"), so the change to “Saved” is announced. While saving it is aria-busy, which holds announcements until the save settles.
The saved state uses the real disabled attribute, not just a style.
The saved state keeps full contrast rather than Bootstrap’s faded disabled look, because it reports an outcome rather than an unavailable action.