본문으로 건너뛰기
언어

Spinnerstandard

작업이 진행 중임을 보여 주는 돌아가는 아이콘(spinner)입니다. shadcn base-nova 의 stock 아이템입니다. 버튼의 `isLoading` 같은 속성은 없으며 `Spinner` 를 직접 넣고 버튼을 `disabled` 로 둡니다.

설치

pnpm
pnpm dlx shadcn@4.23.0 add @uikit/spinner

Default

spinner-example.tsx
import {  Example,  ExampleWrapper,} from "@/components/example"import { Badge } from "@/components/ui/badge"import { Button } from "@/components/ui/button"import {  Empty,  EmptyContent,  EmptyDescription,  EmptyHeader,  EmptyMedia,  EmptyTitle,} from "@/components/ui/empty"import { Field, FieldLabel } from "@/components/ui/field"import {  InputGroup,  InputGroupAddon,  InputGroupInput,} from "@/components/ui/input-group"import { Spinner } from "@/components/ui/spinner"import { ArrowRightIcon } from "lucide-react"
export default function SpinnerExample() {  return (    <ExampleWrapper>      <SpinnerBasic />      <SpinnerInButtons />      <SpinnerInBadges />      <SpinnerInInputGroup />      <SpinnerInEmpty />    </ExampleWrapper>  )}
function SpinnerBasic() {  return (    <Example title="Basic">      <div className="flex items-center gap-6">        <Spinner />        <Spinner className="size-6" />      </div>    </Example>  )}
function SpinnerInButtons() {  return (    <Example title="In Buttons">      <div className="flex flex-wrap items-center gap-4">        <Button>          <Spinner data-icon="inline-start" /> Submit        </Button>        <Button disabled>          <Spinner data-icon="inline-start" /> Disabled        </Button>        <Button variant="outline" disabled>          <Spinner data-icon="inline-start" /> Outline        </Button>        <Button variant="outline" size="icon" disabled>          <Spinner data-icon="inline-start" />          <span className="sr-only">Loading...</span>        </Button>      </div>    </Example>  )}
function SpinnerInBadges() {  return (    <Example title="In Badges" className="items-center justify-center">      <div className="flex flex-wrap items-center justify-center gap-4">        <Badge>          <Spinner data-icon="inline-start" />          Badge        </Badge>        <Badge variant="secondary">          <Spinner data-icon="inline-start" />          Badge        </Badge>        <Badge variant="destructive">          <Spinner data-icon="inline-start" />          Badge        </Badge>        <Badge variant="outline">          <Spinner data-icon="inline-start" />          Badge        </Badge>      </div>    </Example>  )}
function SpinnerInInputGroup() {  return (    <Example title="In Input Group">      <Field>        <FieldLabel htmlFor="input-group-spinner">Input Group</FieldLabel>        <InputGroup>          <InputGroupInput id="input-group-spinner" />          <InputGroupAddon>            <Spinner />          </InputGroupAddon>        </InputGroup>      </Field>    </Example>  )}
function SpinnerInEmpty() {  return (    <Example title="In Empty State" containerClassName="lg:col-span-full">      <Empty className="min-h-[300px]">        <EmptyHeader>          <EmptyMedia variant="icon">            <Spinner />          </EmptyMedia>          <EmptyTitle>No projects yet</EmptyTitle>          <EmptyDescription>            You haven&apos;t created any projects yet. Get started by creating            your first project.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <div className="flex gap-2">            <Button render={<a href="#" />} nativeButton={false}>              Create project            </Button>            <Button variant="outline">Import project</Button>          </div>          <Button            variant="link"            render={<a href="#" />}            nativeButton={false}            className="text-muted-foreground"          >            Learn more{" "}            <ArrowRightIcon />          </Button>        </EmptyContent>      </Empty>    </Example>  )}