Illustrations

Empty state illustrations are visual cues used when there's no content to display or action taken yet, like empty lists or pages. They guide users, replacing generic messages with engaging visuals that prompt appropriate actions.

You should use this when there's no content or action taken. This visual prompt not only enhances the user experience by providing clear direction but also adds personality to the product, reducing confusion and encouraging user engagement.

import { AddCsvIllustration } from '@internal/illustrations';

export const MyComponent = () => {
  return <AddCsvIllustration size={200} />;
};

When incorporating our illustrations into your design, follow these best practices:

Use the illustrations to infuse a sense of fun and establish an emotional connection with our users.

Apply illustrations judiciously in empty states, error states, and success states.

Ensure the chosen illustration aligns with the user's experience. Choose images that resonate with the context.

Illustrations are not UI elements. Refrain from integrating them as buttons or any other interactive UI components.

Ensure that each illustration is placed within a suitable context to maintain a cohesive and meaningful visual experience. Misuse of illustrations without these elements may lead to a misrepresentation of our intended design aesthetic.