Widget empty state

NoData example

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

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.

tsx

import React from 'react';
import Select from 'intergalactic/select';
import { I18nProvider } from 'intergalactic/utils/lib/enhances/WithI18n';
import { NoData } from 'intergalactic/widget-empty';
import Card from 'intergalactic/card';
import Button from 'intergalactic/button';
import { Box } from 'intergalactic/flex-box';

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>
      Select language: <Select 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;

import React from 'react';
import Select from 'intergalactic/select';
import { I18nProvider } from 'intergalactic/utils/lib/enhances/WithI18n';
import { NoData } from 'intergalactic/widget-empty';
import Card from 'intergalactic/card';
import Button from 'intergalactic/button';
import { Box } from 'intergalactic/flex-box';

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>
      Select language: <Select 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 example

The template already includes default title, icon and description. You can provide a custom description and additional elements if you need.

tsx

import React from 'react';
import Select from 'intergalactic/select';
import { Box } from 'intergalactic/flex-box';
import { I18nProvider } from 'intergalactic/utils/lib/enhances/WithI18n';
import { Error } from 'intergalactic/widget-empty';
import Card from 'intergalactic/card';
import Button from 'intergalactic/button';
import ReloadM from 'intergalactic/icon/Reload/m';
import Link from 'intergalactic/link';

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>
      Select language: <Select 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={
                <>
                  Please try again later. If the problem persists, contact us at{' '}
                  <Link href='mailto:mail@semrush.com'>mail@semrush.com</Link>
                </>
              }
            >
              <Box mt={4}>
                <Button addonLeft={ReloadM}>
                  <Button.Text>Reload page</Button.Text>
                </Button>
              </Box>
            </Error>
          </Card.Body>
        </Card>
      </I18nProvider>
    </div>
  );
};

export default Demo;

import React from 'react';
import Select from 'intergalactic/select';
import { Box } from 'intergalactic/flex-box';
import { I18nProvider } from 'intergalactic/utils/lib/enhances/WithI18n';
import { Error } from 'intergalactic/widget-empty';
import Card from 'intergalactic/card';
import Button from 'intergalactic/button';
import ReloadM from 'intergalactic/icon/Reload/m';
import Link from 'intergalactic/link';

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>
      Select language: <Select 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={
                <>
                  Please try again later. If the problem persists, contact us at{' '}
                  <Link href='mailto:mail@semrush.com'>mail@semrush.com</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 examples

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.

tsx

import React from 'react';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
import Card from 'intergalactic/card';
import WidgetEmpty, { getIconPath } from 'intergalactic/widget-empty';

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;

import React from 'react';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';
import Card from 'intergalactic/card';
import WidgetEmpty, { getIconPath } from 'intergalactic/widget-empty';

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;

You can find other examples of custom messages you can create with the WidgetEmpty component.

tsx

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

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;

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

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;

Accessibility

Writing code

CSS Injection

NoData example

Error example

Custom examples

Accessibility

CSS Injection

Widget empty state

NoData example ​

Error example ​

Custom examples ​

NoData example

Error example

Custom examples