스피너

import {
  Item,
  ItemContent,

Spinner는 진행 중인 작업을 알리는 단일 애니메이션 아이콘입니다. lucide-react의 LoaderIcon을 animate-spin으로 감싸고, 기본적으로 role="status"와 aria-label을 제공합니다. 프리미티브 라이브러리는 쓰지 않아 두 백엔드가 같은 구현을 공유하며, currentColor를 상속해 놓인 네오브루탈리즘 컨트롤 색에 맞춥니다.

다음과 같은 경우에 사용합니다.

• 제출 대기 — 뮤테이션이 도는 동안 버튼 안에 넣고 레이블은 그대로 둡니다.
• 인라인 fetch 상태 — 데이터를 기다리는 배지, input group, 테이블 셀.
• 섹션 단위 로딩 — 패널이 스트리밍되는 동안 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"를 렌더링하므로 추가 배선 없이 스크린 리더가 로딩 상태를 읽습니다. 근처 텍스트가 이미 상태를 설명하면("저장 중…") Spinner에 aria-hidden="true"를 전달하세요. 한 번만 읽히면 됩니다. 영역 전체가 로딩 상태로 바뀌면 컨테이너에 aria-busy="true"를 두세요.