Non-Ideal State


Non-ideal UI states inform the user that some content is unavailable.


  • 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.


  • 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.


1import React from "react";
2import { NonIdealState } from "@commure/components-foundation";
4function MyNonIdealState() {
5 return <NonIdealState className="some-class-name" />;
8export default MyNonIdealState;

API Reference


Prop NameRequired?TypeDescription
actionfalseElementAn action to resolve the non-ideal state which appears after `description`.
childrenfalseReact.ReactNodeAdvanced usage: React `children` will appear last (after `action`). Avoid passing raw strings as they will not receive margins and disrupt the layout flow.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
descriptionfalseReact.ReactChildA longer description of the non-ideal state. A string or number value will be wrapped in a `<div>` to preserve margins.
iconfalseIconName | MaybeElementThe name of a Blueprint icon or a JSX Element (such as `<Spinner/>`) to render above the title.
titlefalseReact.ReactNodeThe title of the non-ideal state.

Related Reading

Blueprint Reference