Empty State

Also known as a blank state, the empty state is basically a screen you encounter when there's no data to display.

Example 1

You don’t seem to have any file

Basically a screen you encounter when there’s no data to display.

 
import Button from "@tailus-ui/Button";
import { Plus } from "lucide-react";
import { Title, Text } from "@tailus-ui/typography"

const MyComponent = () => (
    <div className="max-w-sm mx-auto space-y-6">
        <ContentIllustration />
        <div className="space-y-2 text-center">
            <Title size="lg">You don't seem to have any file</Title>
            <Text>Basically a screen you encounter when there's no data to display.</Text>
        </div>
        <Button.Root className="mx-auto" variant="outlined" intent="gray">
            <Button.Icon type="leading" size="md">
                <Plus />
            </Button.Icon>
            <Button.Label>Add a file</Button.Label>
        </Button.Root>
    </div>
)

Example 2

Add friends to start a discussion

Basically a screen you encounter when there’s no data to display.

Méschac Irung

Suggested for you

Bernard Ng

Suggested for you

Théo Balick

Suggested for you

 
import Button from "@tailus-ui/Button";
import { Plus } from "lucide-react";
import { Title, Text } from "@tailus-ui/typography"

const MyComponent = () => (
    <div className="max-w-sm mx-auto space-y-6">
        <ChatIllustration />
        <div className="space-y-2 text-center">
            <Title size="lg">Add friends to start a discussion</Title>
            <Text>Basically a screen you encounter when there's no data to display.</Text>
        </div>
        <Button.Root className="mx-auto">
            <Button.Label>Browse friends</Button.Label>
        </Button.Root>
    </div>
)