Documentação

Spinner

Um indicador que pode ser usado para exibir um estado de carregamento.

"use client";
import { Spinner } from "@blips/ui/components/spinner";
export default function SpinnerDemo() {
  return <Spinner />;
}

Instalacao


pnpm add @blips/ui

Uso

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

<Spinner />

Customizacao

Voce pode substituir o icone padrao do spinner por qualquer outro icone editando o componente Spinner.

components/ui/spinner.tsx

import { CircleNotch } from "@phosphor-icons/react"
 
import { cn } from "@/lib/utils"
 
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <CircleNotch
      role="status"
      aria-label="Carregando"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}
 
export { Spinner }

Exemplos

Tamanho

Use a classe utilitaria size-* para alterar o tamanho do spinner.

Carregando…

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

export default function SpinnerSize() {
  return (
    <div className="flex items-center gap-6">
      <Spinner className="size-3" />
      <Spinner className="size-4" />
      <Spinner className="size-6" />
      <Spinner className="size-8" />
    </div>
  );
}

Botao

Adicione um spinner a um botao para indicar um estado de carregamento.

Carregando…

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

export default function SpinnerButton() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button disabled size="sm">
        <Spinner />
        Loading...
      </Button>
      <Button variant="outline" disabled size="sm">
        <Spinner />
        Please wait
      </Button>
      <Button variant="secondary" disabled size="sm">
        <Spinner />
        Processing
      </Button>
    </div>
  );
}

Badge

Adicione um spinner a um badge para indicar um estado de carregamento.

SyncingUpdatingProcessing

Carregando…

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

export default function SpinnerBadge() {
  return (
    <div className="flex items-center gap-4 [--radius:1.2rem]">
      <Badge>
        <Spinner />
        Syncing
      </Badge>
      <Badge variant="secondary">
        <Spinner />
        Updating
      </Badge>
      <Badge variant="outline">
        <Spinner />
        Processing
      </Badge>
    </div>
  );
}

Input Group

Use um spinner dentro de um input group para indicar processamento.

Validating...

Carregando…

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupTextarea,
} from "@blips/ui/components/input-group";
import { Spinner } from "@blips/ui/components/spinner";
import { ArrowUp } from "@phosphor-icons/react";

export default function SpinnerInputGroup() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <InputGroup>
        <InputGroupInput placeholder="Send a message..." disabled />
        <InputGroupAddon align="inline-end">
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupTextarea placeholder="Send a message..." disabled />
        <InputGroupAddon align="block-end">
          <Spinner /> Validating...
          <InputGroupButton className="ml-auto" variant="default">
            <ArrowUp />
            <span className="sr-only">Send</span>
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

AnteriorSonner PróximoSwitch