Empty

データが 0 件のときの表示。

結果が 1 件も無いときの表示です。アイコン・説明・アクションはすべて任意です。

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

見出し。

Typestring

Default"Nothing here yet"

description?string

見出しの下の補足文。

Typestring

icon?ReactNode

見出しの上に置く絵柄。

TypeReactNode

action?ReactNode

下部に置く次の一手（ボタンやリンク）。

TypeReactNode

className?string

足すクラス。

Typestring