Feedback
Status, messages and loading. Success, information, warning and error share one system: each has a tone, an icon shape and a word, so colour never carries the meaning alone. Messages that arrive later are read out through polite live regions, and blocking errors through assertive ones.
12 pages, 16 exports
- Badge
- SeverityBadge
- StatusDot
- Alert
- Banner
- FlashMessages
- Spinner
- Skeleton
- SkeletonText
- SkeletonRow
- EmptyState
- Meter
- ProgressBar
- ToastProvider
- ToastViewport
- useToast
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Badge, SeverityBadge, StatusDot, Alert, … } from '@skribly/ui/feedback'Pages in this groupLink to the section Pages in this group
- BadgeA short label for a state or a count, such as Draft or Failed. Pick it for static facts inside rows and headers; use StatusDot when the state is live.Badge
- SeverityBadgeThe level of a finding or an incident, from critical to info. Pick it whenever items are ranked by how much they matter.SeverityBadge
- StatusDotA small dot and a word for the state of a process, a service or a person. Pick it for lists of things that run.StatusDot
- AlertA message inside the content, next to what it is about. Pick it for a result that stays on screen, such as the error summary at the top of a form; pick a toast for news that may pass.Alert
- BannerA full-width strip at the top of a page or panel for a state that lasts, such as read-only mode or a lost connection.Banner
- FlashMessagesMessages the server left for the next page, such as "Saved" after a redirect or the errors of a form. Pick it for server-rendered results; use useToast for results of actions on the client.FlashMessages
- SpinnerA small ring for a wait of unknown length, such as loading a list. Pick ProgressBar when the share of work done is known.Spinner
- SkeletonPlaceholders that hold the space of content while it loads, so the page does not jump. Pick SkeletonRow for lists and tables, SkeletonText for paragraphs and Skeleton for any other shape.Skeleton, SkeletonText, SkeletonRow
- EmptyStateWhat fills a view that has nothing to show: nothing yet, no results, or could not load. Always offer the next step, such as creating the first item, clearing filters or trying again.EmptyState
- MeterA level within a known range, such as storage used or a score. Pick ProgressBar for work that moves towards done.Meter
- ProgressBarProgress of a task towards done, such as an upload or an import. Leave out value while the length is unknown.ProgressBar
- ToastsShort messages about the result of an action, shown at the edge of the screen. Pick a toast for news that may pass, such as "Saved". Results that must stay belong in an Alert. useToast() shows one from anywhere under the provider, and container renders the stack inside a themed panel.ToastProvider, ToastViewport, useToast