State and feedback
Empty, loading, error, confirmation, and command states.
Example
A representative composition rendered with the published package API.
No matching resources
Adjust your filters or try another search term.
No alerts
Compact empty states fit inside sections and tabs.
Options
The decisions most consumers need to make when adopting this family.
stateChoose the narrowest pattern for the user’s current task.
StateView toneColors the duotone icon spot. Brand suits empty and first-run states, success a completed flow, and neutral a quiet inline state. ErrorState uses danger.
StateView sizeDefault replaces a page's primary content; compact fits inside sections, panels, and tabs.
dividerAdd the bottom divider only when the state replaces rows inside a table body.
| Option | Values or anatomy | Guidance |
|---|---|---|
state | empty · loading · error · confirmation · command | Choose the narrowest pattern for the user’s current task. |
StateView tone | brand (default) · neutral · success · danger | Colors the duotone icon spot. Brand suits empty and first-run states, success a completed flow, and neutral a quiet inline state. ErrorState uses danger. |
StateView size | default · compact | Default replaces a page's primary content; compact fits inside sections, panels, and tabs. |
divider | false (default) · true | Add the bottom divider only when the state replaces rows inside a table body. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { CommandPalette, ConfirmationDialog, ErrorState, LoadingRows, StateView } from "@conscia-labs/design-system";