Feedback
How the interface tells people what the system is doing — confirmations, warnings, failures, waiting and progress. Every feedback component draws from the same semantic color scale, announces itself politely to assistive technology, and always leaves the user a next step.
Alert
An inline, contextual message that sits in the page flow. The default
is informational; add .b-alert--success,
.b-alert--warning or .b-alert--danger.
A close button with data-b-dismiss removes the alert
with zero extra JS.
role="alert" so screen readers announce them
immediately; info, success and warning alerts should use
role="status" for a polite announcement. Never rely on
color alone — each variant pairs its tint with an icon and explicit
title text. Keep the close button's aria-label.Banner
A full-width announcement pinned above the app chrome. The default
wears the accent gradient; .b-banner--neutral sits
quietly on a surface color for less urgent notices. The close button
uses data-b-dismiss.
Toast
A transient, glassy confirmation that floats in from the bottom
corner and dismisses itself. At runtime toasts live inside an
auto-created .b-toast-region; the static markup below
shows each variant's anatomy — icon, content and an optional
trailing action.
Live triggers
In an app you never write toast markup by hand — call
Barua.toast() and the library builds the element,
appends it to the shared region and handles timing. Press these:
JavaScript API
Barua.toast(options) returns
{ dismiss } so you can remove a toast
programmatically. Hovering a toast pauses its timer.
| Option | Type | Default | Description |
|---|---|---|---|
title | string | "" | Bold first line. |
description | string | "" | Secondary line under the title. |
variant | "info" | "success" | "warning" | "danger" | "info" | Chooses the icon and its semantic tint. |
action | { label, onClick } | null | Trailing action button; the toast dismisses after the handler runs. |
duration | number (ms) | 4000 | Auto-dismiss delay. Pass 0 to keep the toast until dismissed. |
aria-live="polite" and each toast gets
role="status" — screen readers announce it at the next
pause without interrupting. Because toasts vanish on their own,
never put information in one that isn't available somewhere
persistent, and keep durations at 4 seconds or more.action like Undo when the operation is reversible.
Snackbar
A snackbar is the same .b-toast component anchored to
the bottom center of the viewport — wrap it in
<div class="b-toast-region b-toast-region--center"
aria-live="polite"> instead of the default corner region.
It usually skips the icon and always offers one action.
Notification
A rich, macOS-style notification card: source app, title, body and
timestamp beside an avatar or app mark. It shares the toast's glass
treatment and works with data-b-dismiss on any child
button.
Tip
A TipKit-style callout: glass card with an icon tile, one-line promise, quiet explanation, inline actions and a dismiss. For teaching a feature in place — once, then it leaves.
Status Indicator
A dot plus label for presence and system health. Presence modifiers
--online, --busy and --away
have semantic aliases --success, --danger
and --warning for non-people states; add
--pulse to animate live activity.
Progress Bar
A determinate track whose fill width comes from the
--b-progress custom property, e.g.
style="--b-progress: 65%". The fill animates smoothly
when the value changes.
Sizes
Semantic colors
Indeterminate
When the total is unknown, drop the value and let the fill sweep.
role="progressbar", an aria-label (or
aria-labelledby), and aria-valuenow /
aria-valuemin / aria-valuemax kept in sync
with --b-progress. Omit aria-valuenow on
indeterminate bars — that's how assistive tech knows the duration is
unknown.Circular Progress
A conic-gradient ring driven by a unitless
--b-progress value from 0–100 set on
.b-circular. Wrap it in .b-circular-wrap
to center a .b-circular__label in the ring; resize with
--b-circular-size and --b-circular-track.
Loading Spinner
A lightweight indeterminate ring in three sizes. For buttons, prefer
the built-in .b-btn.is-loading state from
Actions — it swaps the
label for a spinner while keeping the accessible name.
Skeleton
Shimmering placeholders that hold layout while content loads. Four
shapes — --text, --title,
--circle and --card — compose into a ghost
of the real screen.
Composed loading state
aria-hidden="true" and set
aria-busy="true" on the loading container so assistive
tech waits for real content instead of reading empty boxes. Remove
aria-busy when the data arrives.Result States
A full-panel outcome message for the end of a flow — one component,
four modifiers. .b-result--success,
.b-result--error, .b-result--warning and
.b-result--confirm compose the Success State, Error
State, Warning State and Confirmation State patterns from the
component list. Each pairs a tinted icon disc with a title,
supporting copy and clear next actions.
Redacted
SwiftUI's .redacted(reason: .placeholder): add
.b-redacted to any element and its real content renders
as a breathing placeholder block — same box, same layout, no
skeleton markup to maintain. Remove the class when data arrives.