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

Display a title, description, and actions when there is no content to display.

title

Required

string

The title of the empty state.

---

children

ReactNode

Child components such as EmptyDescription and EmptyActions.

---

className

string

Optional styles to apply to the empty state container.

---

icon

IconDefinition

The icon to display in the empty state.

---

EmptyDescription

Display a description below the title in an Empty component.

children

ReactNode

Contents of the description.

---

EmptyActions

A container for displaying buttons, links, or other actions below the title and description of Empty.

children

ReactNode

Contents of the actions.

---