Forms & feedback
Alerts, toasts, overlays, guided flows and status indicators that react with a little spring.
Alert
Root class sf-alert with --info --success --warning --danger. Add data-sf-alert-dismiss to a close button; an optional sf-alert__action sits beside it.
Reload to get the latest improvements.
A receipt is on its way to your inbox.
You have used 92% of your 10 GB plan.
We could not reach the server. Check your connection.
Inline banner / callout
Root class sf-callout with --info --success --warning --danger and optional --tint. Title, body and an icon tile.
Tip: keyboard shortcuts
Press ? anywhere to see every shortcut. Learn more
Heads up
Changing your username will break existing profile links.
All checks passed
Your site is ready to publish.
Toast variants and stack placement
Root class sf-notice (JS: Soft.notify({type, title, message, action, placement, duration})). Triggers use data-sf-notice="success|error|info|warning|loading". Hover pauses the timer bar.
Snackbar with undo
Root class sf-snackbar. Soft.snackbar({message, actionLabel, onAction, duration}) or data-sf-snackbar="message" with data-sf-snackbar-action. The ring counts down.
Empty state
Root class sf-empty. The illustration is pure CSS shapes (sf-empty__art).
No invoices yet
Create your first invoice and it will show up here.
Error state / 404 block
Root class sf-errorstate. The retry button uses data-sf-btn-loading to show a width-preserving spinner.
We could not find that page
It may have moved or never existed. Try again or head back home.
Success checkmark and error cross
Root class sf-drawmark with --error --sm --lg. SVG strokes draw themselves; data-sf-draw-replay="#id" replays.
Spinner set
Root class sf-spinner; variants --dots --bars --pulse; sizes --sm (default) --lg --xl.
Progress ring and step progress
Root classes sf-ring (data-sf-ring, aria-valuenow, animates in view) and sf-stepbar (data-sf-stepbar data-sf-step).
Stepper / wizard header
Root class sf-wizsteps (--vertical). Items carry data-state="done|current|todo"; the current one gets aria-current="step".
- 1CartComplete
- 2ShippingIn progress
- 3PaymentUp next
- 4ReviewUp next
- 1Order placedMon 9:12
- 2PackedMon 14:40
- 3Out for deliveryArriving today
- 4DeliveredPending
Multi-step form wizard
Root class sf-wizard with data-sf-wizard. Panels use data-sf-wizard-panel; required fields are validated before moving on, the summary panel (data-sf-wizard-summary) reads fields marked data-sf-summary="Label".
Confirm and alert dialogs
Built on <dialog class="sf-modal sf-dialog"> with --info --warning --danger --success --center. Close buttons use data-sf-dialog-close="confirm|cancel"; open with data-sf-dialog-open or Soft.confirm({...}) (promise).
Drawer, side sheet and bottom sheet
Root class sf-drawer on a <dialog> (--right --left --bottom). Open with data-sf-drawer-open="id" or Soft.drawer.open(id). Esc, backdrop click and the swipe handle (bottom) close it; focus is trapped by the modal dialog.
Popover
Trigger data-sf-popover="id" with data-sf-popover-trigger="click|hover" and data-sf-placement. The panel is sf-popover with an arrow and flips when there is no room.
They will get an email with a link to join this workspace.
Opens on hover or keyboard focus, closes when you leave.
This wanted to open on the right but there was not enough room.
Tooltip upgrade
Core data-sf-tip plus data-sf-placement="top|bottom|left|right". Rich tooltips use sf-tipcard with an sf-tipcard__bubble (role tooltip).
Ctrl D ArchiveHidden from lists, restorable any time.
Status dot / presence
Root class sf-status with --away --busy --offline --ping --sm --lg. Wrap an avatar in sf-presence for a presence badge.
Notification bell
Root class sf-bell with data-sf-bell. New items bounce the count and ring the bell: Soft.bell.push(el, {title, time}).
Onboarding tour / coachmark
Define steps in a hidden data-sf-tour container (data-sf-tour-step with data-sf-target, data-sf-title), start with data-sf-tour-start="id" or Soft.tour.start(id). Arrow keys, Esc and Tab are handled.
Everything that happened while you were away.
Emoji reaction / feedback widget
Root class sf-fbreact with data-sf-fbreact; buttons sf-fbreact__btn carry data-sf-value and fire soft:react. Shows a thank-you state with a change link.
Was this article helpful?
How was your experience?
Undo bar / inline confirmation
Root class sf-undo with data-sf-undo data-sf-duration. Delete swaps the row for an "Deleted. Undo" bar with a timer; events soft:undo-commit and soft:undo-restore.
Form validation summary and field error animations
Add data-sf-fbvalidate to a form and a sf-valsummary with data-sf-valsummary. Invalid fields shake, errors slide in with a popping icon, summary links jump to the field.
Rate / usage meter
Root class sf-usage (data-sf-usage, role="meter"). Segments turn amber past the warn threshold and red past the critical one (--sf-forms-feedback-warn / -crit). Soft.meter(el, value) updates it.
Plenty of headroom.
Skeleton variants
Root class sf-skel built from core sf-skeleton pieces: sf-skel__line, __avatar, __media, --row --card --table.
Loading overlay and button loading state
data-sf-btn-loading="ms" swaps a button label for a spinner without changing its width. Soft.loading(host, true) or data-sf-loading-toggle="#id" adds a veil over a sf-loadable region.
12 updates this week across 4 projects.