Empty Message

1.2.4

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.

EmptyMessage

Name	Type	Description
illustration	React.ReactNode	Optional node that contains an illustration for the component. Will stack vertically on mobile and horizontally on desktop.
icon	React.ReactNode	Optional icon to display on top of the text.
title*	string	Title of the component.
text	string	Optional content text for additional context.
actions	React.ReactNode	Optional node to showcase buttons or actions.