Components

SaveBar

A bar that rises from the bottom while a form has unsaved changes, with Save and Discard.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

Change the field: the bar rises. Discard goes back to the old value; Save saves and the bar sinks.

Display name

Change the field; the bar rises from the bottom.

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>
  );
}

States

Open, saving (Discard disabled) and saved.

You have unsaved changes

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col gap-lg">
        <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
          <SaveBar open position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
        </div>
        <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
          <SaveBar open saving position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
        </div>
        <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
          <SaveBar open saved position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
        </div>
      </div>
    </Provider>
  );
}

Light and dark mode

The bar uses the raised surface and the overlay shadow.

You have unsaved changes

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col gap-lg">
        <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
          <SaveBar open position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
        </div>
        <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
          <SaveBar open saving position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
        </div>
        <div className="flex h-32 flex-col justify-end rounded-lg border border-line-subtle">
          <SaveBar open saved position="sticky" warnOnLeave={false} onSave={() => undefined} onDiscard={() => undefined} />
        </div>
      </div>
    </Provider>
  );
}