NoData state

The component already includes a title and a default description. You only need to specify the illustration type. You can provide a custom description and additional elements if needed.

TIP

The locale can be passed directly to the component or wrap your application in I18nProvider from the intergalactic/utils package, as shown in the example below.

import { Box } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import Card from '@semcore/ui/card';
import { I18nProvider } from '@semcore/ui/core/lib/utils/enhances/WithI18n';
import Select from '@semcore/ui/select';
import { Text } from '@semcore/ui/typography';
import { NoData } from '@semcore/ui/widget-empty';
import React from 'react';

const options = [
  'en',
  'de',
  'es',
  'fr',
  'it',
  'nl',
  'pl',
  'pt',
  'sv',
  'vi',
  'tr',
  'zh',
  'ja',
  'ko',
].map((o) => ({
  value: o,
  children: o,
}));

const Demo = () => {
  const [lang, setLang] = React.useState('en');

  return (
    <div>
      <Text size={200} tag='label' mr={2} htmlFor='select-language'>
        Language
      </Text>
      <Select id='select-language' options={options} value={lang} onChange={setLang} />
      <I18nProvider value={lang}>
        <Card mt={4}>
          <Card.Header>
            <Card.Title>Line chart</Card.Title>
          </Card.Header>
          <Card.Body>
            <NoData type='line-chart' />
          </Card.Body>
        </Card>
        <Card mt={4}>
          <Card.Header>
            <Card.Title>Nothing found</Card.Title>
          </Card.Header>
          <Card.Body>
            <NoData type='nothing-found'>
              <Box mt={4}>
                <Button use='secondary'>Clear filters</Button>
              </Box>
            </NoData>
          </Card.Body>
        </Card>
      </I18nProvider>
    </div>
  );
};

export default Demo;

Error state

The component already includes default title, icon and description. You can provide a custom description and additional elements if needed.

import { Box } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import Card from '@semcore/ui/card';
import { I18nProvider } from '@semcore/ui/core/lib/utils/enhances/WithI18n';
import ReloadM from '@semcore/ui/icon/Reload/m';
import Link from '@semcore/ui/link';
import Select from '@semcore/ui/select';
import { Text } from '@semcore/ui/typography';
import { Error } from '@semcore/ui/widget-empty';
import React from 'react';

const options = [
  'en',
  'de',
  'es',
  'fr',
  'it',
  'nl',
  'pl',
  'pt',
  'sv',
  'vi',
  'tr',
  'zh',
  'ja',
  'ko',
].map((o) => ({
  value: o,
  children: o,
}));

const Demo = () => {
  const [lang, setLang] = React.useState('en');

  return (
    <div>
      <Text size={200} tag='label' htmlFor='select-lang-error' mr={2}>
        Language
      </Text>
      <Select id='select-lang-error' options={options} value={lang} onChange={setLang} />
      <I18nProvider value={lang}>
        <Card mt={4}>
          <Card.Header>
            <Card.Title>Known error</Card.Title>
          </Card.Header>
          <Card.Body>
            <Error>
              <Box mt={4}>
                <Button addonLeft={ReloadM}>Reload page</Button>
              </Box>
            </Error>
          </Card.Body>
        </Card>
        <Card mt={4}>
          <Card.Header>
            <Card.Title>Unknown error</Card.Title>
          </Card.Header>
          <Card.Body>
            <Error
              description={(
                <>
                  Try again later. If the problem persists,
                  {' '}
                  <Link href='https://www.semrush.com/company/contacts/'>contact our support</Link>
                </>
              )}
            >
              <Box mt={4}>
                <Button addonLeft={ReloadM}>
                  <Button.Text>Reload page</Button.Text>
                </Button>
              </Box>
            </Error>
          </Card.Body>
        </Card>
      </I18nProvider>
    </div>
  );
};

export default Demo;

Custom states

You can create custom messages, such as the "Set up your tool" message.

To get the link to the illustration, use the function getIconPath from the package.

import { Box } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import Card from '@semcore/ui/card';
import WidgetEmpty, { getIconPath } from '@semcore/ui/widget-empty';
import React from 'react';

const Demo = () => {
  return (
    <div>
      <Card mt={4}>
        <Card.Header>
          <Card.Title>[Tool Name]</Card.Title>
        </Card.Header>
        <Card.Body>
          <WidgetEmpty icon={getIconPath('combined-chart')}>
            <WidgetEmpty.Title>Set up your [Tool Name]</WidgetEmpty.Title>
            <WidgetEmpty.Description>
              [Tool Name] allows you to get daily updates on positions in Google's top 100 organic
              and paid search results.
            </WidgetEmpty.Description>
            <Box mt={4}>
              <Button theme='success' use='primary'>
                Set up [Tool Name]
              </Button>
            </Box>
          </WidgetEmpty>
        </Card.Body>
      </Card>
    </div>
  );
};

export default Demo;

Here are some other examples of custom messages you can create with the WidgetEmpty component.

import Card from '@semcore/ui/card';
import WidgetEmpty, { getIconPath } from '@semcore/ui/widget-empty';
import React from 'react';

const Demo = () => {
  return (
    <div>
      <Card mt={4}>
        <Card.Header>
          <Card.Title>Congratulations!</Card.Title>
        </Card.Header>
        <Card.Body>
          <WidgetEmpty icon={getIconPath('good')}>
            <WidgetEmpty.Title>Good results</WidgetEmpty.Title>
            <WidgetEmpty.Description>Wow! You are doing great!</WidgetEmpty.Description>
          </WidgetEmpty>
        </Card.Body>
      </Card>
      <Card mt={4}>
        <Card.Header>
          <Card.Title>Keep going!</Card.Title>
        </Card.Header>
        <Card.Body>
          <WidgetEmpty icon={getIconPath('nexttime')}>
            <WidgetEmpty.Title>Next time will be better</WidgetEmpty.Title>
            <WidgetEmpty.Description>Keep going to achieve good results.</WidgetEmpty.Description>
          </WidgetEmpty>
        </Card.Body>
      </Card>
    </div>
  );
};

export default Demo;