error

Error

Error state view with guidance and actions.

Error Examples

Copy-ready examples with live previews.

Basic

Render the default error icon container with an explicit size.

Live preview

error

import Error from "@/_components/error/Error";

export default function Example() {
  return <Error width="48px" height="48px" />;
}

Size presets

Use small/medium/large sizes depending on density.

Live preview

Small (24px)

error

Medium (48px)

error

Large (96px)

error

import Error from "@/_components/error/Error";

export default function Example() {
  return (
    <>
      <Error width="24px" height="24px" />
      <Error width="48px" height="48px" />
      <Error width="96px" height="96px" />
    </>
  );
}

Responsive sizing

Because width/height are strings, you can pass any valid CSS value like clamp().

Live preview

Responsive size (clamp)

error

The container uses CSS clamp(), so it grows/shrinks with the viewport.

import Error from "@/_components/error/Error";

export default function Example() {
  return (
    <Error
      width="clamp(28px, 5vw, 72px)"
      height="clamp(28px, 5vw, 72px)"
    />
  );
}

Inline with text

A common pattern for short error labels inside rows and cards.

Live preview

Inline with text

error

Something went wrong while loading this section.

import Error from "@/packages/ui/src/_components/error/Error";

export default function Example() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <Error width="20px" height="20px" />
      <div>Something went wrong while loading this section.</div>
    </div>
  );
}

Controlled size (interactive)

Drive the component size from your UI state.

Live preview

Current: 48px

Controlled (interactive)

error

import { useState } from "react";
import Error from "@/_components/error/Error";
import { Button } from "@/_components/buttons_variants/buttons/Button";

const SIZE_PRESETS = [
  { label: "24px", width: "24px", height: "24px" },
  { label: "32px", width: "32px", height: "32px" },
  { label: "48px", width: "48px", height: "48px" },
  { label: "72px", width: "72px", height: "72px" },
  { label: "96px", width: "96px", height: "96px" },
] as const;

export default function Example() {
  const [idx, setIdx] = useState(2);
  const current = SIZE_PRESETS[idx];

  return (
    <>
      <Button variant="primary" onClick={() => setIdx((v) => (v + 1) % SIZE_PRESETS.length)}>
        Next size
      </Button>

      <Error width={current.width} height={current.height} />
    </>
  );
}

Fallback block

Use as a section-level fallback (loading/error empty states).

Live preview

Section fallback

error

We couldn't load this content.

Try again or check your connection.

import Error from "@/packages/ui/src/_components/error/Error";

export default function Example() {
  return (
    <div
      style={{
        borderRadius: 12,
        background: "rgba(0,0,0,0.04)",
        padding: 18,
        display: "grid",
        placeItems: "center",
        gap: 10,
        minHeight: 120,
        textAlign: "center",
      }}
    >
      <Error width="56px" height="56px" />
      <div>We couldn&apos;t load this content.</div>
      <div style={{ fontSize: 12, opacity: 0.65 }}>Try again or check your connection.</div>
    </div>
  );
}

On this page

Error Props

Error — Props
Prop	Type	Required	Default	Description
width	string	Yes	—	CSS width for the container (e.g. "24px", "3rem", "100%", "clamp(24px, 5vw, 72px)").
height	string	Yes	—	CSS height for the container (e.g. "24px", "3rem", "auto", "clamp(24px, 5vw, 72px)").