'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Feedback
SaveBar and TopLoadingBar
SaveBar appears while a form has unsaved changes, with Save and Discard and ⌘S to save. TopLoadingBar is a thin progress line at the top of the window while a page loads.
import { SaveBar, TopLoadingBar } from '@alea/ui';
Examples
Save bar
Edit the field: the bar appears with Save and Discard, and ⌘S or Ctrl+S saves. It is announced to screen readers when it appears.
Top loading bar
A thin bar at the top of the window while a page loads: it creeps on its own, or follows a value, then completes and fades.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border-strong…--alea-status-warning…--alea-surface-overlay…--alea-text…
Space
--alea-space-2…--alea-space-4…
Radius
--alea-radius-full…--alea-radius-lg…
Type
--alea-font-size-md…--alea-font-weight-medium…
Shadow
--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-toast…
Props
SaveBar props
A bar that appears while a form has unsaved changes, with Save and Discard. Announced to screen readers when it appears; ⌘S saves.
| Prop | Type | Default | Description |
|---|---|---|---|
isVisiblerequired | boolean | - | Show it while there are unsaved changes. |
onSaverequired | () => void | - | Saves the changes. |
discardLabel | ReactNode | - | Label of the discard button. Default "Discard". |
isSaving | boolean | - | Shows a spinner on Save while it works. |
message | ReactNode | - | The message. Default "Unsaved changes". |
onDiscard | (() => void) | - | Throws the changes away. |
position | "bottom" | "top" | 'top' | Where it shows: top (over the header, default) or bottom. |
saveLabel | ReactNode | - | Label of the save button. Default "Save". |
saveShortcut | boolean | true | ⌘S / Ctrl+S saves while it is visible. Default true. |
TopLoadingBar props
A thin bar at the very top of the window while a page loads: it creeps forward, then completes and fades.
| Prop | Type | Default | Description |
|---|---|---|---|
isLoadingrequired | boolean | - | Shows the bar while a page or a big request loads. |
aria-label | string | - | Name for screen readers. Default "Loading". |
value | number | - | A known progress from 0 to 100; without it the bar creeps forward on its own. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
SaveBar
- Variants
positionbottomtop- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-savebar.alea-savebar-message.alea-savebar-actions- Data attributes
data-position=topdata-position=bottomdata-visible
TopLoadingBar
- States
- Indeterminate
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-top-loading.alea-top-loading-bar- Data attributes
data-done
Accessibility
- The save bar is a named region; its message is announced politely when it appears.
- Hidden, it is removed from the keyboard and the accessibility tree.
- The loading bar is a progressbar named Loading, with its value when you pass one.
Keyboard
| Key | Does |
|---|---|
| ⌘S / Ctrl+S | Saves while the bar shows |
Do and don't
Do
- Show the save bar only when something really changed.
- Keep Discard: people need a way back.
Don't
- Don't also auto-save the same form: pick one.