Feedback

Banners, callouts, toasts, notifications, empty states, spinners, and skeletons.

Components in this categoryCopy link

Banners & status barsCopy link

BannerCopy link

Banner is a page-level notice for a condition that holds until something changes. Tone controls the tint, border, and icon. With only children, it renders as one line; passing title adds a heading above the message. flush drops the radius and side borders for a banner pinned under a TopBar.

StatusBarCopy link

The app-shell footer: a 28px band under the scrolling column. Cells are StatusBarItems, each with a dim label and a stronger value; use StatusBarItem with a tone when the value is a state.

import { Banner, StatusBar, StatusBarItem } from "@solarius/onset";
import type { BannerTone } from "@solarius/onset";

<Banner tone="warn" meta="3 nodes affected">
  Degraded performance detected in us-east-1.
</Banner>

<Banner flush tone="err" title="Primary region unreachable" onDismiss={dismiss}>
  Requests are being served from eu-west-1.
</Banner>

<StatusBar
  left={[<StatusBarItem label="Region">us-east-1</StatusBarItem>]}
  right={[<StatusBarItem label="p95" mono>42ms</StatusBarItem>]}
/>

CalloutsCopy link

CalloutCopy link

Callout is an inline alert block. Unlike Banner, which frames a whole page region, it sits in the flow of the content. Use it inside forms, cards, and settings pages for tips, warnings, and confirmations.

import { Callout } from "@solarius/onset";
import type { CalloutTone } from "@solarius/onset";

<Callout tone="ok" title="Saved">
  Your changes have been saved successfully.
</Callout>;

ToastsCopy link

ToastCopy link

Toast is a brief, auto-dismissing notification card with a tone-driven icon, a message, an optional link, and a close button. Toast alone is only the card; pair it with ToastProvider for the managed stack.

ToastProviderCopy link

ToastProvider manages the toast stack: mounting, ordering, auto-dismiss timers, and the portaled viewport. Timers pause while the pointer is over the stack or focus is inside it.

Use the useToast() hook anywhere below the provider. It returns toast (a ToastFn that fires a toast and returns its id) and dismiss (dismiss one or all toasts). toast.ok, toast.warn, and toast.err are tone-shorthand helpers.

import { ToastProvider, useToast } from "@solarius/onset";
import type { ToastPlacement, ToastFn } from "@solarius/onset";
import { Button } from "@solarius/onset";

function App() {
  return (
    <ToastProvider placement="bottom-right" duration={5000}>
      <Dashboard />
    </ToastProvider>
  );
}

function Dashboard() {
  const { toast } = useToast();

  return <Button onClick={() => toast.ok("Changes saved")}>Save</Button>;
}

// With options:
toast({ children: "Node provisioned", tone: "ok", duration: 3000 });
toast.warn("Rate limit approaching", { duration: 8000 });
toast.err("Deployment failed", {
  href: "/deployments/42",
  linkLabel: "View run",
});

// Re-fire the same id to update in place:
const id = toast({ id: "saving", children: "Saving…", tone: "ok" });
// Later:
toast({ id: "saving", children: "Saved", tone: "ok", duration: 2000 });

ExamplesCopy link

NotificationsCopy link

NotificationCopy link

A persistent notification row. Unlike Toast, which is transient and disappears on its own, notifications accumulate and stay until dismissed. Each carries a read state and its own actions.

NotificationItem shape: id, title, body, time (Date), read, tone (NotificationTone: "default" | "info" | "ok" | "warn" | "err"), icon, category, and actions (inline action buttons).

InboxPanelCopy link

A persistent notification inbox, typically shown behind a bell icon. Supports filtering (All / Unread) and optional grouping by category.

NotificationBellCopy link

A bell icon with an unread badge. Pair it with InboxPanel inside a PopoverPanel. It forwards its ref so the popover can anchor to the bell's DOM node.

import { Notification, InboxPanel, NotificationBell } from "@solarius/onset";
import type { NotificationItem, NotificationTone } from "@solarius/onset";

const items: NotificationItem[] = [
  { id: "1", title: "Deployment completed", time: new Date(), tone: "ok", read: false },
];

<Notification item={items[0]} />
<NotificationBell count={3} />

LoadingCopy link

Choose the loading shape by what is on screen. Nothing rendered yet, but the layout ahead is known: draw it with a Skeleton. Content already on screen being refetched: cover it with a LoadingOverlay, which keeps scroll position. A single control working after a click: a Spinner inside it.

SpinnerCopy link

Spinner supports duration, thickness, tone, and an accessible label. Button, IconButton, and AuthProviderButton render it when loading is enabled. See Spinner.

LoadingOverlayCopy link

Covers a region while its data is in flight without collapsing the layout underneath, so a re-fetch does not throw away the reader's scroll position. It waits delay milliseconds (120 by default) before appearing, so a fast response never flashes chrome. Full props on its page.

Empty states & skeletonsCopy link

EmptyStateCopy link

Zero-results / zero-data placeholder for tables, panels, and filtered views.

SkeletonCopy link

A shimmering loading placeholder block. Set w, h, and circle for avatar placeholders.

SkeletonTextCopy link

Skeleton lines with a shortened final line.

SkeletonList, SkeletonTable, SkeletonCardCopy link

SkeletonTable draws rows at Table's density, with the same cell padding and borders, so nothing shifts when data loads. SkeletonList renders a feed or list row, with an optional leading circle. SkeletonCard renders a card's contents, not its frame.

All of them take animation: "shimmer" (the default), "pulse" for a page carrying several at once, or "none". Every one goes static under prefers-reduced-motion.

import { EmptyState, Skeleton, SkeletonText, SkeletonList, SkeletonTable, SkeletonCard } from "@solarius/onset";

<EmptyState title="No data" description="Nothing to show yet." />
<Skeleton w={200} h={12} />
<SkeletonText lines={3} lastWidth="40%" />
<SkeletonTable rows={8} columns={["20%", "45%", "30%"]} />