SaveBar

When to use

SaveBar reminds users on long settings and edit pages that changes are not saved yet. Save stays reachable wherever they are on the page.

When not to use

• For settings that apply at once: if every change saves immediately, no bar is needed.
• For short forms: a visible Save button under the form is enough.
• For multi-step flows: use WizardFooter.

Anatomy

Display name

Change the field; the bar rises from the bottom.

DiscardSave

LightDark

Copy code

import { SaveBar, TextInput, Provider } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [saved, setSaved] = useState('User 1');
  const [value, setValue] = useState('User 1');
  const [saving, setSaving] = useState(false);
  return (
    <Provider locale="en-GB">
      <div className="flex h-72 flex-col overflow-auto rounded-lg border border-line-subtle">
        <div className="flex-1 p-xl">
          <TextInput label="Display name" description="Change the field; the bar rises from the bottom." value={value} onValueChange={(next) => setValue(String(next))} className="max-w-sm" />
        </div>
        <SaveBar
          position="sticky"
          warnOnLeave={false}
          open={value !== saved}
          saving={saving}
          onDiscard={() => setValue(saved)}
          onSave={() => {
            setSaving(true);
            window.setTimeout(() => {
              setSaving(false);
              setSaved(value);
            }, 700);
          }}
        />
      </div>
    </Provider>
  );
}

1. Bar: At the bottom, the width of the page.
2. Message: An info icon and “You have unsaved changes”.
3. Discard: Secondary button; drops the changes.
4. Save: Primary button; saving and saved states.

Behaviour

• When open is true the bar rises from the bottom; when it closes it sinks faster.
• A closed bar is inert: it cannot be focused or read.
• When it opens, the message is announced politely.
• During saving, Save shows a spinner and Discard is disabled. saved shows the success state; then close open.
• While open, leaving the page opens the browser’s confirm prompt (warnOnLeave).

Guidelines

• Do not show the bar without changes; tie open to a real difference.
• Do not present Discard as an irreversible delete; it only drops unsaved changes.
• A fixed bar covers the bottom of the page; leave room for it at the bottom, or use sticky.

Content

Turkish	English
Kaydedilmemiş değişiklikleriniz var	You have unsaved changes
Kaydet / Vazgeç	Save / Discard
Kaydedildi	Saved

Glass

Under a Provider material="glass", the bar turns glass. material="solid" keeps it solid.

Related components

• Form: Checks before saving.
• Button: Loading and success states.