@skbkontur/empty-state

Пустые состояния

Компонент для отображения пользователю состояния отсутствия контента и доступных при этом действий.

• Гайд в фигме
• Контрол в библиотеке

Кастомизация

Цвет текста

Через проп use доступно два варианта цвета - #757575 для empty и #222222 для status.

Если нужен другой цвет, то можно переопределить можно через className или style.

import { EmptyState } from "@skbkontur/empty-state";

<EmptyState use='empty'>
  <EmptyState.Header>Заголовок</EmptyState.Header>
  <EmptyState.Body>Дополнительный, объясняющий текст</EmptyState.Body>
</EmptyState>

import { EmptyState } from "@skbkontur/empty-state";

<EmptyState use='status'>
  <EmptyState.Header>Заголовок</EmptyState.Header>
  <EmptyState.Body>Дополнительный, объясняющий текст</EmptyState.Body>
</EmptyState>

Кастомная иконка

import { EmptyState } from "@skbkontur/empty-state";
import { HandThumbUpIcon } from '@skbkontur/icons/icons/HandThumbUpIcon';

<EmptyState use='status'>
  <EmptyState.Header icon={<HandThumbUpIcon size={64} color='#2291FF' />}>Вы закрыли все задачи</EmptyState.Header>
  <EmptyState.Body>Время заняться любимым хобби</EmptyState.Body>
</EmptyState>

Расположение кнопок

Если кнопок две или меньше, то по умолчанию они располагаются по горизонтали. Если кнопок больше двух, то они располагаются по вертикали. Проп direction задаёт направление.

import { EmptyState } from "@skbkontur/empty-state";
import { Button } from "@skbkontur/react-ui";
<EmptyState use="status">
  <EmptyState.Header>Заголовок</EmptyState.Header>
  <EmptyState.Body>Дополнительный, объясняющий текст</EmptyState.Body>
  <EmptyState.Footer direction="column">
    <Button width="100%" size="medium">Кнопка</Button>
    <Button width="100%" size="medium">Кнопка</Button>
  </EmptyState.Footer>
</EmptyState>

Иерархия заголовков

Чтобы сохранять иерархию заголовков на странице, в EmptyState.Header настраивается уровень заголовка через проп headingLevel со значениями от 1 до 6.

import { EmptyState } from "@skbkontur/empty-state";

<EmptyState >
  <EmptyState.Header headingLevel={2}>
    Заголовок
  </EmptyState.Header>
  <EmptyState.Body>Дополнительный, объясняющий текст</EmptyState.Body>
</EmptyState>

Примеры использования

Пустое состояние

import { EmptyState } from "@skbkontur/empty-state";

<EmptyState use='empty'>
  <EmptyState.Header>Документов нет</EmptyState.Header>
  <EmptyState.Body>Можете добавить вручную или получить от ваших партнёров</EmptyState.Body>
</EmptyState>

Статусы

• Success

import { EmptyState } from "@skbkontur/empty-state";
import { CheckCircleIcon64Solid } from '@skbkontur/icons/icons/CheckCircleIcon/CheckCircleIcon64Solid';

<EmptyState use='status'>
  <EmptyState.Header icon={<CheckCircleIcon64Solid color='#26AD50' />}>Все требования выполнены</EmptyState.Header>
  <EmptyState.Body>Вы молодец, теперь можно и отдохнуть</EmptyState.Body>
</EmptyState>

• Warning

import { EmptyState } from "@skbkontur/empty-state";
import { Button } from "@skbkontur/react-ui";
import { WarningTriangleIcon64Solid } from '@skbkontur/icons/icons/WarningTriangleIcon/WarningTriangleIcon64Solid';
import { ArrowRoundTimeForwardIcon } from '@skbkontur/icons/icons/ArrowRoundTimeForwardIcon';

<EmptyState use='status'>
  <EmptyState.Header icon={<WarningTriangleIcon64Solid color='#FCB73E' />}>Не удалось загрузить страницу</EmptyState.Header>
  <EmptyState.Body>Обновите страницу или обратитесь в техподдержку</EmptyState.Body>
  <EmptyState.Footer>
    <Button icon={<ArrowRoundTimeForwardIcon size={20} weight='light'/>} size="medium">Обновить страницу</Button>
  </EmptyState.Footer>
</EmptyState>

• Error

import { EmptyState } from "@skbkontur/empty-state";
import { Button } from "@skbkontur/react-ui";
import { XCircleIcon64Solid } from '@skbkontur/icons/icons/XCircleIcon/XCircleIcon64Solid';
import { ArrowRoundTimeForwardIcon } from '@skbkontur/icons/icons/ArrowRoundTimeForwardIcon';

<EmptyState use='status'>
  <EmptyState.Header icon={<XCircleIcon64Solid color='#FE4C4C' />}>Не удалось загрузить страницу</EmptyState.Header>
  <EmptyState.Body>Обновите страницу или обратитесь в техподдержку</EmptyState.Body>
  <EmptyState.Footer>
    <Button icon={<ArrowRoundTimeForwardIcon size={20} weight='light'/>} size="medium">Обновить страницу</Button>
  </EmptyState.Footer>
</EmptyState>