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.

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 = () => (
    title="This is an empty message component."
    text="This component has an icon."
    icon={<SearchIcon size={32} />}
      <Link appearance="primary">
        <Icon color="currentColor" source={<RedoIcon />} />
        Reload page

export default Example;

Instale o componente via terminal.

npm install @nimbus-ds/empty-message

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