Skip to content
Try free

SaveBar

A sticky bar at the bottom of a settings page: unsaved changes with Discard and Save changes, then saving, saved or an error, announced politely.

  • Pro
  • Version 2.0.0-rc.1
  • APG pattern: Buttons with a polite status message (role="status")

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

You have unsaved changes.
Show the code

Default, code

<SaveBar state="unsaved" onSave={() => {}} onDiscard={() => {}} sticky={false} />

States

You have unsaved changes.
Saving your changes…
All changes saved.
Could not save. Check your connection and try again.
Show the code

States, code

<div className="flex flex-col gap-stack-md">
  {(['unsaved', 'saving', 'saved', 'error'] as const).map((s) => <SaveBar key={s} state={s} onSave={() => {}} onDiscard={() => {}} sticky={false} />)}
</div>

Interactive

You have unsaved changes.
Show the code

Interactive, code

() => {
  const [state, setState] = useState<SaveBarState>('unsaved');
  return (
    <SaveBar
      state={state}
      sticky={false}
      onSave={() => { setState('saving'); setTimeout(() => setState('saved'), 600); }}
      onDiscard={() => setState('saved')}
    />
  );
}

Tokens

The 14 design tokens SaveBar reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 14 tokens
Tokens SaveBar reads
TokenValue nowCSS variable
color.bg.canvas…--sd-color-bg-canvas
color.border.default…--sd-color-border-default
color.icon.danger…--sd-color-icon-danger
color.icon.success…--sd-color-icon-success
color.text.danger…--sd-color-text-danger
color.text.default…--sd-color-text-default
color.text.secondary…--sd-color-text-secondary
color.text.success…--sd-color-text-success
elevation.2…--sd-elevation-2
layer.sticky…--sd-layer-sticky
spacing.gap.md…--sd-spacing-gap-md
spacing.gap.sm…--sd-spacing-gap-sm
spacing.inset.lg…--sd-spacing-inset-lg
spacing.inset.sm…--sd-spacing-inset-sm

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/save-bar

Then import it

import { SaveBar } from "@/components/ui/save-bar"

Props

SaveBar props
PropTypeWhat it does
staterequired'unsaved' | 'saving' | 'saved' | 'error'unsaved: Discard and Save changes. saving: Save shows a spinner, Discard waits. saved: confirmation, nothing to press. error: Try again.
onSaverequired() => voidSave changes (and Try again after an error).
onDiscardrequired() => voidPut the settings back as they were saved.
messagestringThe message, if the default for the state does not fit ("You have 3 unsaved changes.").
saveLabelstringDefault 'Save changes'Save button text. Default "Save changes".
discardLabelstringDefault 'Discard'Discard button text. Default "Discard".
retryLabelstringDefault 'Try again'Save button text after an error. Default "Try again".
stickybooleanDefault trueStick to the bottom and publish its height as --sd-scroll-padding-bottom and --sd-toast-offset-bottom (2.4.11). Default true.
classNamestring

When to use it

Use it for

  • Pages that save several settings at once

Use something else for

  • Settings that apply straight away: use Switch rows with no bar
  • A single form: put Save in the form

Accessibility

Screen readers announce "You have unsaved changes." then, after Save changes, "Saving your changes…" and "All changes saved.".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.4.13, 2.5.5.

Buttons keep 44px targets in Comfortable and 24px in Compact (AA).

What your product still has to do

  • Render one SaveBar per page, only while there is something to save or report
  • Move to saved or error when the save ends; never leave it on saving

Shared patterns it ships with: Sticky bar publishes its height as scroll padding (2.4.11, 2.4.12).

This release’s test results

Test results for SaveBar in this release
axe-core (WCAG A, AA, AAA and best practice)80 runs across every story, theme, density and width: 0 violations
Rendered text contrast270 text runs: 0 below 7:1, lowest 8.43:1
Target size58 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)36 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

SaveBar keyboard steps
KeyWhat happens
TabTab reaches Discard
TabTab reaches Save changes
Shift+TabShift+Tab moves back to Discard

In Figma

The Figma component is SaveBar, with State (Unsaved, Saving, Saved, Error). The Figma library isn’t published yet.

Figma to code: State → state (Unsaved = "unsaved", Saving = "saving", Saved = "saved", Error = "error"); nested Discard → onDiscard; nested Save → onSave.