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.
Edit code

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

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

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