Non-ideal state

A NonIdealState explains why content is missing and what to do next. Use it for empty results, errors and views with no data yet.

Usage#

import { NonIdealState } from "@clawscale/react";

The component renders icon, title, description, action and children, in that order. For a loading state, pass a Spinner as icon.

Examples#

Empty search#

Say what matched nothing and offer a way out. action renders below the description.

No matching pipelines

No pipeline in eu-west-1 matches ingest_eu. Check the name or clear the filters.

core/non-ideal-state/empty-search.tsx

import { Button, NonIdealState } from "@clawscale/react";

export default function NonIdealStateEmptySearch() {
  return (
    <NonIdealState
      icon="search"
      title="No matching pipelines"
      description="No pipeline in eu-west-1 matches ingest_eu. Check the name or clear the filters."
      action={<Button icon="filter-remove" text="Clear filters" />}
    />
  );
}

Error with action#

Say what failed and give one clear next step.

Could not load datasets

The metadata service did not respond within 30 seconds.

core/non-ideal-state/error.tsx

import { Button, NonIdealState } from "@clawscale/react";

export default function NonIdealStateError() {
  return (
    <NonIdealState
      icon="error"
      title="Could not load datasets"
      description="The metadata service did not respond within 30 seconds."
      action={<Button intent="primary" icon="refresh" text="Retry" />}
    />
  );
}

Layout#

layout is vertical by default. horizontal puts the icon beside the text, for wide and short containers.

Horizontal layout

No metrics yet

Metrics appear after the first run of refresh_revenue finishes.

core/non-ideal-state/layout.tsx

import { NonIdealState, Switch } from "@clawscale/react";
import { useState } from "react";

export default function NonIdealStateLayout() {
  const [horizontal, setHorizontal] = useState(true);
  return (
    <>
      <Switch
        checked={horizontal}
        label="Horizontal layout"
        onChange={(event) => setHorizontal(event.currentTarget.checked)}
      />
      <NonIdealState
        layout={horizontal ? "horizontal" : "vertical"}
        icon="timeline-line-chart"
        title="No metrics yet"
        description="Metrics appear after the first run of refresh_revenue finishes."
      />
    </>
  );
}

Props interface#

interface NonIdealStateProps extends Props@clawscale/react

Props	Description
`action`	`React.JSX.Element` An action to resolve the non-ideal state which appears after `description`.
`children`	`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`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`description`	`React.ReactNode` A longer description of the non-ideal state. A string or number value will be wrapped in a `<div>` to preserve margins.
`icon`	`IconName \| MaybeElement` The name of a Blueprint icon or a JSX element (such as `<Spinner/>`) to render above the title.
`iconMuted`	`boolean` = `true` Whether the icon should use a muted style.
`iconSize`	`NonIdealStateIconSize` = `NonIdealStateIconSize.STANDARD` How large the icon visual should be.
`layout`	`"vertical" \| "horizontal"` = `"vertical"` Component layout, either vertical or horizontal.
`title`	`React.ReactNode` The title of the non-ideal state.