Non-Ideal State
Introduction
Non-ideal UI states inform the user that some content is unavailable.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Examples
- Empty state: a container has just been created and has no data in it yet, or a container's contents have been intentionally removed.
File no longer exists.
This file was recently deleted.
- Loading state: a container is awaiting data. A good practice is to show a spinner for this state, with optional explanatory text below the spinner.
Reloading...
- Error state: something went wrong (for instance, 404 and 500 HTTP errors). In this case, a good practice is to add a call to action directing the user what to do next.
Patient not found.
We couldn't find a patient with that identifier. Make sure it's spelled correctly, or try using a different one.
Usage
API Reference
NonIdealState
Prop Name | Required? | Type | Description |
---|---|---|---|
action | false | Element | An action to resolve the non-ideal state which appears after `description`. |
children | false | React.ReactNode | Advanced usage: React `children` will appear last (after `action`). Avoid passing raw strings as they will not receive margins and disrupt the layout flow. |
className | false | string | A space-delimited list of class names to pass along to a child element. |
description | false | React.ReactChild | A longer description of the non-ideal state. A string or number value will be wrapped in a `<div>` to preserve margins. |
icon | false | IconName | MaybeElement | The name of a Blueprint icon or a JSX Element (such as `<Spinner/>`) to render above the title. |
title | false | React.ReactNode | The title of the non-ideal state. |
Related Reading
Blueprint Reference