Component group

Feedback

Six components for status, progress and notification: Alert, Toast, Spinner, Progress, EmptyState and Tooltip.

Alert — inline callout

Heads up

A new workshop slot opened for Kubernetes in Production.

Saved

Your booking for Linda Ārende was confirmed.

Almost full

Only 2 seats remain on this date.

Payment failed

We couldn't process the invoice — this alert is dismissible.

A minimal alert with no title and no icon.

Types: info (sky) · success (green) · warning (amber) · error (maroon). error/warning use role="alert", others role="status".

Prop	Type	Default	Description
`type`	`'info'\|'success'\|'warning'\|'error'`	`'info'`	Colour + tint scheme
`title`	`string`	—	Bold heading above the body
`dismissible`	`boolean`	`false`	Show × button that removes the alert
`icon`	`string`	—	Image URL/path or glyph string
`class`	`string`	—	Extra CSS classes

Drop <Toast /> once in your layout, then call window.xaToast({ type, message, duration }) from anywhere.

API	Type	Default	Description
`type`	`'info'\|'success'\|'warning'\|'error'`	`'info'`	Toast colour scheme
`message`	`string`	`''`	Text content
`duration`	`number`	`3500`	ms before auto-dismiss with fade

Container is a fixed top-right role="status" aria-live="polite" live region.

Loading… sm · 16px Loading… md · 24px Loading… lg · 40px

Prop	Type	Default	Description
`size`	`'sm'\|'md'\|'lg'`	`'md'`	Ring diameter (16/24/40px)
`label`	`string`	`'Loading…'`	Visually-hidden status text
`class`	`string`	—	Extra CSS classes

Uploading assets 25%

Course completion 60%

Storage used 90%

Done 100%

Animated demo 0%

Prop	Type	Default	Description
`value`	`number`	—	Current progress (0–max)
`max`	`number`	`100`	Maximum value
`label`	`string`	—	Label row text
`showValue`	`boolean`	`false`	Show percentage on label row
`color`	`'rose'\|'navy'\|'green'\|'amber'\|'sky'\|'maroon'`	`'rose'`	Fill colour
`class`	`string`	—	Extra CSS classes

When clients register for a course, their bookings will show up here.

Prop	Type	Default	Description
`title`	`string`	—	Heading (required)
`description`	`string`	—	Supporting line
`icon`	`string`	—	Image URL/path (or use the `icon` slot)
`class`	`string`	—	Extra CSS classes

Slots: (default) action buttons · icon custom icon markup.

Hover or keyboard-focus a trigger. Wired with aria-describedby to a generated id.

Prop	Type	Default	Description
`content`	`string`	—	Bubble text (required)
`position`	`'top'\|'right'\|'bottom'\|'left'`	`'top'`	Bubble placement
`class`	`string`	—	Extra CSS classes