Spinner

いちばん小さい待機表示。

回転するアイコンだけの待機表示です。ボタンの中など、狭い場所に置きます。

export const client = "only";

import { Spinner, Button } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="flex items-center gap-4">
      <Spinner />
      <Button disabled>
        <Spinner />
        保存中
      </Button>
      <Spinner className="size-6 text-muted-foreground" />
    </div>
  );
}

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

<svg> そのものなので、大きさは size-*、色は text-* で決まります。

画面ぶんの読み込みには Loading、レイアウトを保ったまま待たせるなら Skeleton を使ってください。