# Feedback — alerts, toasts, progress, skeletons, empty states Source: https://ui.barua.tz/docs/feedback.html Rules and conventions: https://ui.barua.tz/llms.txt ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#alert - Classes: `b-alert` `b-alert--danger` `b-alert--success` `b-alert--warning` `b-alert__close` `b-alert__content` `b-alert__desc` `b-alert__icon` `b-alert__title` ```html
A new version is available
Refresh to load Barua UI v0.2 — no data will be lost.
Backup complete
All 1,284 files are safely stored. Next backup runs tonight at 02:00.
Backup complete
All 1,284 files are safely stored. Next backup runs tonight at 02:00.
 ``` ## 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 . - Documentation: https://ui.barua.tz/docs/feedback.html#banner - Classes: `b-banner` `b-banner--neutral` `b-banner__close` ```html
Barua UI v0.2 ships glass navigation and charts. See what's new
Scheduled maintenance Saturday 02:00–04:00 UTC. Status page
``` ```tsx import { Banner } from "barua-ui"; Barua UI v0.2 ships glass navigation and charts. See what's new Scheduled maintenance Saturday 02:00–04:00 UTC. Status page ``` ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#toast - Classes: `b-btn` `b-btn--ghost` `b-btn--outline` `b-btn--tinted` `b-table` `b-table-wrap` `b-toast` `b-toast--danger` `b-toast--success` `b-toast--warning` `b-toast__action` `b-toast__content` `b-toast__desc` `b-toast__icon` `b-toast__title` ```html
New sign-in
Safari on macOS, Arusha TZ
Saved
Profile updated
Working offline
C ``` ## Snackbar A snackbar is the same .b-toast component anchored to the bottom center of the viewport — wrap it in
instead of the default corner region. It usually skips the icon and always offers one action. - Documentation: https://ui.barua.tz/docs/feedback.html#snackbar - Classes: `b-toast` `b-toast-region` `b-toast-region--center` `b-toast__action` `b-toast__content` `b-toast__title` ```html
Conversation moved to Trash
``` ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#notification - Classes: `b-avatar` `b-avatar--square` `b-notification` `b-notification__app` `b-notification__body` `b-notification__desc` `b-notification__time` `b-notification__title` ```html
AK
Messages
Amina Kimaro
Uploaded the Q3 launch deck — take a look before standup.
now
Barua Mail
Weekly digest ready
12 threads resolved, 3 waiting on you.
9:41
``` ```tsx import { Avatar, Notification } from "barua-ui"; AK
Messages
Amina Kimaro
Uploaded the Q3 launch deck — take a look before standup.
now
Barua Mail
Weekly digest ready
12 threads resolved, 3 waiting on you.
9:41 ``` ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#tip - Classes: `b-link` `b-link--muted` `b-tip` `b-tip__actions` `b-tip__close` `b-tip__content` `b-tip__desc` `b-tip__icon` `b-tip__title` ```html
Swipe to archive Drag any conversation left to file it without opening it.
``` ```tsx import { Link, Tip } from "barua-ui"; Swipe to archive Drag any conversation left to file it without opening it. Try it Not now ``` ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#status-indicator - Classes: `b-status` `b-status--away` `b-status--busy` `b-status--danger` `b-status--online` `b-status--pulse` `b-status--success` `b-status--warning` ```html Offline Online Away Busy Live Operational Degraded Major outage ``` ```tsx import { StatusDot } from "barua-ui"; Offline Online Away Busy Live Operational Degraded Major outage ``` ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#progress-bar - Classes: `b-progress` `b-progress--danger` `b-progress--indeterminate` `b-progress--lg` `b-progress--sm` `b-progress--success` `b-progress--warning` `b-progress__fill` ```html
``` ```tsx import { Progress } from "barua-ui";
``` ## 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 . - Documentation: https://ui.barua.tz/docs/feedback.html#circular-progress - Classes: `b-circular` `b-circular-wrap` `b-circular__label` ```html
72%
45%
90%
``` ```tsx import { CircularProgress } from "barua-ui";
72%
45%
90%
``` ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#loading-spinner - Classes: `b-btn` `b-btn--primary` `b-spinner` `b-spinner--lg` `b-spinner--sm` ```html ``` ```tsx import { Button, Spinner } from "barua-ui"; ``` ## Skeleton Shimmering placeholders that hold layout while content loads. Four shapes — --text , --title , --circle and --card — compose into a ghost of the real screen. - Documentation: https://ui.barua.tz/docs/feedback.html#skeleton - Classes: `b-card` `b-card__body` `b-skeleton` `b-skeleton--card` `b-skeleton--circle` `b-skeleton--text` `b-skeleton--title` ```html
``` ```tsx import { Skeleton } from "barua-ui"; ``` ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#result-states - Classes: `b-btn` `b-btn--ghost` `b-btn--primary` `b-divider` `b-result` `b-result--confirm` `b-result--error` `b-result--success` `b-result--warning` `b-result__actions` `b-result__desc` `b-result__icon` `b-result__title` ```html
Payment complete
Your receipt is on its way to your inbox. Funds typically arrive within two business days.
Payment complete
Your receipt is on its way to your inbox. Funds typically arrive within two business days.
Something went wrong
We couldn't process the transfer and no money left your account. Try again, or contact support if it keeps happening.
``` ## 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. - Documentation: https://ui.barua.tz/docs/feedback.html#redacted - Classes: `b-card` `b-card__body` `b-card__subtitle` `b-card__title` `b-redacted` ```html
Amina Hassan
Reconciled 14 invoices
Amina Hassan
Reconciled 14 invoices
``` ```tsx import { Card, CardBody, CardSubtitle, CardTitle } from "barua-ui"; Amina Hassan Reconciled 14 invoices Amina Hassan Reconciled 14 invoices ```