Empty Message

The Empty Message component can be used in multiple scenarios. To communicate whenever a search returns no results, if a page has no content, or if there is an error loading data. It can include an icon or illustration to support the written content, as well as a title and additional content text, and an optional node with actions that can be provided to the user so as to engage in next steps if there is an error on the page.

With icon

With illustration

import React from "react";
import { EmptyMessage } from "@nimbus-ds/patterns";
import { RedoIcon, SearchIcon } from "@nimbus-ds/icons";
import { Icon, Link } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <EmptyMessage
    title="This is an empty message component."
    text="This component has an icon."
    icon={<SearchIcon size={32} />}
    actions={
      <Link appearance="primary">
        <Icon color="currentColor" source={<RedoIcon />} />
        Reload page
      </Link>
    }
  />
);

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/empty-message

Props

Additional props are passed to the <EmptyMessage> element. See div docs for a list of props accepted by the <EmptyMessage> element.