Empty

The zero-results state.

What to show when there are no results. The icon, description and action are all optional.

export const client = "only";

import { Empty, Button } from "@squadbase/vantage/ui";
import { SearchX } from "lucide-react";

export default function Example() {
  return (
    <div className="w-[28rem] rounded-xl border">
      <Empty
        icon={<SearchX />}
        title="該当する取引がありません"
        description="期間や地域の条件を広げてみてください。"
        action={<Button variant="outline">条件をリセット</Button>}
      />
    </div>
  );
}

import { Empty } from "@squadbase/vantage/ui";

PropType

title?string

The heading.

Typestring

Default"Nothing here yet"

description?string

Supporting text under the heading.

Typestring

icon?ReactNode

Artwork above the heading.

TypeReactNode

action?ReactNode

The next step — a button or link — at the bottom.

TypeReactNode

className?string

Classes to add.

Typestring