contract_delete

Empty State

Placeholder for empty or no-results states.

Empty State Examples

Copy-ready examples with live previews.

Basic usage

Render an illustration with a short message.

Live preview

No results

import Empty_state from "@/packages/ui/src/_components/empty_state/Empty_state";

const src =
  "data:image/svg+xml;utf8," +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="160" viewBox="0 0 240 160">' +
      '<rect width="240" height="160" rx="18" fill="#F3F4F6"/>' +
      '<circle cx="120" cy="70" r="22" fill="#E5E7EB"/>' +
      '<rect x="62" y="104" width="116" height="10" rx="5" fill="#E5E7EB"/>' +
      '<rect x="84" y="124" width="72" height="8" rx="4" fill="#E5E7EB"/>' +
    "</svg>"
  );

export default function Example() {
  return (
    <Empty_state
      src={src}
      alt="Empty state illustration"
      text="No results"
      size="md"
    />
  );
}

Sizes

Use "sm", "md" and "lg" to change spacing and image sizing.

• If you want a predictable size, pass `size` explicitly (the component does not hard-code a default).

Live preview

Nothing here

import Empty_state from "@/packages/ui/src/_components/empty_state/Empty_state";

const src = "data:image/svg+xml;utf8," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'><rect width='240' height='160' rx='18' fill='#F3F4F6'/></svg>");

export default function Example() {
  return (
    <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
      <Empty_state src={src} alt="Empty" text="Small" size="sm" />
      <Empty_state src={src} alt="Empty" text="Medium" size="md" />
      <Empty_state src={src} alt="Empty" text="Large" size="lg" />
    </div>
  );
}

Text as ReactNode

`text` accepts a ReactNode, so you can add line breaks and emphasis.

• The component renders `text` inside a `Title` (h3, bold). If you need full control of typography, consider composing your own block around the illustration.

Live preview

Nothing to show
Try adjusting your filters

import Empty_state from "@/packages/ui/src/_components/empty_state/Empty_state";

const src = "data:image/svg+xml;utf8," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'><rect width='240' height='160' rx='18' fill='#F3F4F6'/></svg>");

export default function Example() {
  return (
    <Empty_state
      src={src}
      alt="Empty"
      size="md"
      text={
        <>
          Nothing to show
          <br />
          <span style={{ fontWeight: 500, opacity: 0.8 }}>Try adjusting your filters</span>
        </>
      }
    />
  );
}

imgProps

Forward common <img> attributes without overriding `src` / `alt`.

• Use `width` and `height` to reduce layout shift.

• Use `style` (objectFit/objectPosition) when your illustration is not a perfect fit.

Live preview

No saved items

import Empty_state from "@/packages/ui/src/_components/empty_state/Empty_state";

const src = "data:image/svg+xml;utf8," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'><rect width='240' height='160' rx='18' fill='#F3F4F6'/></svg>");

export default function Example() {
  return (
    <Empty_state
      src={src}
      alt="Empty"
      text="No saved items"
      size="md"
      imgProps={{
        width: 240,
        height: 160,
        style: { objectFit: "contain" },
        draggable: false,
      }}
    />
  );
}

Live preview

Nothing here yet

import Empty_state from "@/packages/ui/src/_components/empty_state/Empty_state";

const src = "data:image/svg+xml;utf8," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'><rect width='240' height='160' rx='18' fill='#F3F4F6'/></svg>");

export default function Example() {
  return (
    <Empty_state
      src={src}
      alt="Empty"
      text="Nothing here yet"
      imgProps={{ decoding: "async" }}
    />
  );
}

Layout composition

Wrap it to control max width, alignment, and spacing in your page.

Live preview

Create your first project

import Empty_state from "@/packages/ui/src/_components/empty_state/Empty_state";

const src = "data:image/svg+xml;utf8," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'><rect width='240' height='160' rx='18' fill='#F3F4F6'/></svg>");

export default function Example() {
  return (
    <div
      style={{
        border: "1px dashed rgba(0,0,0,0.18)",
        borderRadius: 16,
        padding: 18,
        minHeight: 260,
        display: "grid",
        placeItems: "center",
      }}
    >
      <Empty_state
        src={src}
        alt="Empty"
        text="Create your first project"
        size="lg"
        customStyles={{ maxWidth: 360 }}
      />
    </div>
  );
}

Live preview

import Empty_state from "@/packages/ui/src/_components/empty_state/Empty_state";

const src = "data:image/svg+xml;utf8," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'><rect width='240' height='160' rx='18' fill='#F3F4F6'/></svg>");

export default function Example() {
  return <Empty_state src={src} alt="Empty" size="sm" />;
}

On this page

Empty State Props

Empty State — Props
Prop	Type	Required	Default	Description
src	string	Yes	—	Image URL/data-uri for the illustration.
alt	string	No	""	Image alt text (accessibility).
text	React.ReactNode	No	undefined	Optional message rendered below the image.
size	"sm" \| "md" \| "lg"	No	undefined	Size preset (mapped to classes).
imgProps	Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" \| "alt">	No	undefined	Extra <img> props forwarded to the internal image element (cannot override src/alt).
className	string	No	undefined	Extra className appended to the root element.
customStyles	React.CSSProperties	No	undefined	Inline styles applied to the root element.