Non-Ideal State

Introduction

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

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

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

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

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

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

API Reference

NonIdealState

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