スピナー

import {
  Item,
  ItemContent,

Spinner は、進行中の処理を示す単一のアニメーションアイコンです。lucide-react の LoaderIcon を animate-spin で包み、既定で role="status" と aria-label を同梱します。プリミティブライブラリは関与しないため、両バックエンドは同じ実装を共有し、currentColor を継承して周囲のネオブルータリストなコントロールに合わせます。

次のような場面で使います：

• 送信待ち — mutation 実行中にボタン内へ差し替え。ラベルはそのまま。
• インラインの取得状態 — データ待ちのバッジ、入力グループ、テーブルセル。
• セクション単位の読み込み — パネルがストリームで入る間、Empty と組み合わせる。

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
npx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/spinner.json
コピー

import { Loader2Icon } from "lucide-react"

import { cn } from "@/lib/utils"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      data-slot="spinner"
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}

export { Spinner }

使い方#

コピーimport { Spinner } from "@/components/ui/spinner"

コピー<Spinner />

カスタマイズ#

Spinner コンポーネントを編集すれば、デフォルトのスピナーアイコンを任意の別のアイコンに置き換えられます。

import { LoaderIcon } from "lucide-react"

import { cn } from "@/lib/utils"

コピーimport { LoaderIcon } from "lucide-react"
 
import { cn } from "@/lib/utils"
 
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <LoaderIcon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}
 
export { Spinner }

使用例#

サイズ#

size-* ユーティリティクラスを使って、スピナーのサイズを変更できます。

import { Spinner } from "@/components/ui/spinner"

export function SpinnerSize() {

Button#

ローディング状態を示すために、ボタンにスピナーを追加します。開始位置にするにはラベルの前に data-icon="inline-start" を付けて <Spinner /> を配置し、終了位置にするにはラベルの後ろに data-icon="inline-end" を付けて配置します。

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

Badge#

ローディング状態を示すために、バッジにスピナーを追加します。開始位置にするにはラベルの前に data-icon="inline-start" を付けて <Spinner /> を配置し、終了位置にするにはラベルの後ろに data-icon="inline-end" を付けて配置します。

import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"

Input Group#

import { ArrowUpIcon } from "lucide-react"

import {

Empty#

import { Button } from "@/components/ui/button"
import {
  Empty,

RTL#

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

"use client"

import * as React from "react"

アクセシビリティ#

Spinner は aria-label="Loading" 付きの role="status" を描画するため、追加配線なしでスクリーンリーダーが読み込み状態を読み上げます。近くのテキストが既に状態を説明している場合（「保存中…」）は、代わりに aria-hidden="true" を渡してください。読み上げは1回で十分です。領域全体が読み込み状態に切り替わるときは、コンテナに aria-busy="true" を付けてください。