08 — Components

Feedback & Overlays

Alert banners, toasts, progress bars, badges/tags, and empty states. Always pair color with an icon or text label — never rely on color alone.

Alert Banners

Four semantic variants — success, warning, error, info. Dismiss button hides the banner via local state. Pass dismissible={false} to lock it visible.

✓

Match recorded: Charlotte FC 3–1 Raleigh Athletic has been confirmed and published.

⚠

Match postponed: Triangle FC vs Greensboro has been postponed due to adverse weather.

Submission failed: Unable to submit lineup. Check your connection and try again.

ℹ

Transfer window open: The winter transfer window closes on February 28, 2026 at midnight.

Toast Notifications

Dark-navy toasts for non-blocking feedback. Each instance manages its own dismiss state. Pass onDismiss to hook into a toast queue.

✓

Lineup saved

Your changes are live.

Export failed

Try again in a moment.

ℹ

New match added

Mar 8 vs Triangle FC.

Progress Bars

Labeled progress bars with per-bar color control. Value is clamped 0–100.

Season progress75%

Registration complete100%

Upload: kit assets45%

Badges & Tags

Eight semantic variants built in. Pass bg, color, and border props for custom one-offs.

LiveWinPostponedLossDrawCupFeaturedNew

Empty State

Centered illustration slot, title, description, and optional CTA button. Pass a custom icon node to swap the default plus-circle SVG.

No matches scheduled

There are no upcoming matches for this team. Add a match to get started.