Composites

Feedback

Banners, empty states, loading indicators, toasts, and autosave status — the vocabulary Octen uses to tell users what just happened.

Banner

Page-level alerts across 6 variants, with optional close and action slots.

New search mode available

Broad Search now covers 40+ additional data sources.

API key rotated successfully

sk-live-1...4821 is now active on all environments.

Approaching your monthly quota

You've used 92% of your included Deep Search calls.

Webhook delivery failing

Last 6 attempts to your endpoint returned HTTP 500.

Try Deep Search for free this week

Unlimited Deep Search calls through Friday.

Scheduled maintenance Sunday 2am UTC

Search latency may increase for ~15 minutes.

Empty State

Icon-based (default) version, plus an elevated illustrated example.

No search requests yet

Run your first query from the Playground or call the API — results will show up here in real time.

No search requests yet

Run your first query from the Playground or call the API — results will show up here in real time.

Spinner & Progress

Loading primitives: a bare spinner, spinner-with-text, and a determinate progress bar.

LoadingLoadingLoading
LoadingLoading search results…
62%
100%

Toast

4 variants × 2 tones, plus a specialized undo pattern that commits after 5 seconds.

Toasts stack in ToastViewport, fixed to the bottom-right, and auto-dismiss after ~4s.

Auto-save Indicator

Cycles through idle → saving → saved → error → offline. Announces state changes via aria-live.

No changes

Reference

Import paths for everything on this page.

@/components/ui/banner@/components/ui/empty-state@/components/ui/spinner@/components/ui/toast@/components/ui/autosave-indicator