Feedback & status

How the app reports what is happening: messages that stay on the page, transient notifications, progress for work in flight and placeholders while data loads. Status colour always comes from the semantic scales — blue info, green success, yellow warning, red danger.

Alert

Inline, persistent messages tied to a page or form. Light is the default variant.

Approval workflow updated

Orders above $25,000 now need a second approver from Finance.

PO-2040 approved

Keystone Logistics was notified and the order moved to fulfilment.

Budget at 79%

Spend this month is $412,380 of the $520k operations budget.

ERP sync failed

3 orders could not be exported. Check the connection and retry.

Semantic colours · variant light (default)color="blue | green | yellow | red" resolve to the info / success / warning / danger scales; light tints the 50 stop and promotes text to the 700 stop. withCloseButton dismisses — try it.

Alert variants

Filled for the one message that must not be missed, outline and default for quieter emphasis.

Approval workflow updated

PO-2040 approved

Budget at 79%

ERP sync failed

variant="filled"Solid main stop with white text — reserve for the one message that must not be missed.

Approval workflow updated

PO-2040 approved

Budget at 79%

ERP sync failed

variant="outline"Coloured border and 700-stop text on the card surface.

Approval workflow updated

PO-2040 approved

Budget at 79%

ERP sync failed

variant="default"Neutral surface, border and ink text — colour drops out, so the icon carries the meaning.

Approval workflow updated

PO-2040 approved

Budget at 79%

ERP sync failed

variant="transparent"No surface at all — for inline hints inside cards and forms.

Supplier changes are reviewed by Procurement before they go live.

This order is locked because an approver has already signed it off.

Message onlyWithout a title the body text sits beside the icon — the compact form for in-form hints.

Notification

The card a toast is made of — rendered statically here; colour bar or icon, loading and bordered forms.

New comment

Priya Raman commented on PO-2038.

PO-2040 approved

Keystone Logistics has been notified.

Budget at 79%

$412,380 of $520k spent this month.

ERP sync failed

3 orders could not be exported.

Colour barDefault form: a 6px bar in color, title and message, close button. Shadow is --ds-shadow-lg.

New comment

Priya Raman commented on PO-2038.

PO-2040 approved

Keystone Logistics has been notified.

Budget at 79%

$412,380 of $520k spent this month.

ERP sync failed

3 orders could not be exported.

With iconicon replaces the bar with a filled circle in the same colour.

variant="info"

Bordered info notification

variant="success"

Bordered success notification

variant="warning"

Bordered warning notification

variant="error"

Bordered danger notification

withBorder + shipped variantswithBorder adds a hairline; the shipped globals.css colours its left edge for variant="success | error | warning | info".

Exporting 128 orders

Preparing your CSV — this can take a minute.

Uploading invoice.pdf

2.4 MB of 3.1 MB

All changes saved

Loading & persistentloading swaps the bar for a Loader; withCloseButton={false} for notifications the user cannot dismiss.

Toast stack

Several notifications composed into the top-right stack an app shows after actions.

Purchase orders

Order	Supplier	Status
PO-2041	Atlas Packaging	Pending approval
PO-2040	Keystone Logistics	Approved
PO-2039	Brightline Electrical	Draft
PO-2038	Meridian Foods	Shipped
PO-2037	Cobalt IT Services	Approved

PO-2040 approved

Keystone Logistics has been notified.

Uploading invoice.pdf

2.4 MB of 3.1 MB

ERP sync failed

3 orders could not be exported.

Toast stackStatic Notifications stacked top-right, 340px wide, newest first, max four. @mantine/notifications is not part of the kit — this is the composed equivalent.

Progress

Linear progress for a known ratio — sizes, semantic colours, stacked sections and striped work in flight.

Sizessize="xs" → "xl". The fill is primaryColor — ember.

On-time delivery

92%

Budget used

79%

Storage quota

100%

Q4 sourcing plan

45%

Semantic colourscolor="green | yellow | red | blue" for status meaning — healthy, nearing a limit, over it, informational.

Spend by category

80% of budget

38%

22%

14%

Freight

Packaging

Software

Facilities

Stacked sectionsProgress.Root + Progress.Section with Progress.Label; legend uses ColorSwatch.

Importing suppliers.csv

1,240 / 2,000 rows

Approval progress

2 of 3

Striped, animated & labelledstriped, animated for work in flight; a label row above for the value and context.

Ring & semi-circle

Circular forms for a KPI or a single headline ratio.

66%

80%

budget

RingProgresssections with a centred label; a ThemeIcon marks completion.

79% budget

92% on time

SemiCircleProgressGauge for a single ratio; filledSegmentColor follows the same semantic colours.

Loader

Indeterminate activity indicators for when the duration is unknown.

oval

bars

dots

Typestype="oval" (default), "bars", "dots".

Sizessize="xs" → "xl" (18–58px).

primary

secondary

blue

green

yellow

red

ColoursEmber by default; color="secondary" for ink, or a semantic hue.

Button loading

Buttons report their own pending action instead of a separate spinner.

loadingIdle → loading: keeps the button's width, swaps the label for a Loader and blocks clicks. loaderProps picks the loader type.

Idle

Live: save cycleClick to run idle → loading → idle (1.8s); the button dims behind its loader and ignores clicks.

Skeleton

Placeholders shaped like the content that is about to load.

Text linesFixed-height bars; the last line runs short like a paragraph.

Priya Raman

Approver · Finance

Data loaded

Avatar cardvisible wraps the real content so the layout does not shift when data arrives — toggle it.

Order	Supplier	Owner	Amount

Table rowsReal headers, skeleton cells — the table keeps its columns while rows load.

Loading overlay

Blocks a region that is saving or refreshing while keeping its content in view.

PO-2041

Atlas Packaging

Pending approval