Empty

Usage

To display an empty state, pass title (required) and icon (optional) to <Empty>.

No results

import { Empty } from "stylus-ui/Empty";

export default () => <Empty title="No results" />;

Description

Use <EmptyDescription> to provide additional context about why content is empty. Ideally, offer an action the users can take to resolve the empty state.

No results

We couldn't find anything. Try adjusting your search or filters.

import { faMagnifyingGlass } from "@fortawesome/pro-regular-svg-icons";
import { Empty, EmptyDescription } from "stylus-ui/Empty";

export default () => (
  <Empty icon={faMagnifyingGlass} title="No results">
    <EmptyDescription>
      We couldn't find anything. Try adjusting your search or filters.
    </EmptyDescription>
  </Empty>
);

Actions

To display buttons or other actions below the empty state, wrap them in <EmptyActions>.

No results

Try adjusting your search or filters to find what you're looking for.

Clear filtersGo back

import { faMagnifyingGlass } from "@fortawesome/pro-regular-svg-icons";
import { Empty, EmptyDescription, EmptyActions } from "stylus-ui/Empty";
import { Button } from "stylus-ui/Button";

export default () => (
  <Empty icon={faMagnifyingGlass} title="No results">
    <EmptyDescription>
      Try adjusting your search or filters to find what you're looking for.
    </EmptyDescription>
    <EmptyActions>
      <Button variant="secondary">Clear filters</Button>
      <Button variant="secondary">Go back</Button>
    </EmptyActions>
  </Empty>
);

API Reference

Empty

Prop	Type	Default
title	string
children	ReactNode
className	string
icon	IconDefinition

EmptyDescription

Prop	Type	Default
children	ReactNode

EmptyActions

Prop	Type	Default
children	ReactNode