Visão geral

O Spinner é um componente customizado simples usando border-animation.

Tamanhos

default

Cores

Em botão

Import

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

Padrão de implementação

Snippets para uso do Spinner.

Botão com estado de loading

"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/spinner"

export function BotaoSalvar() {
  const [loading, setLoading] = useState(false)

  async function handleSave() {
    setLoading(true)
    await salvarDados()
    setLoading(false)
  }

  return (
    <Button onClick={handleSave} disabled={loading}>
      {loading && <Spinner size="sm" className="text-primary-foreground" />}
      {loading ? "Salvando..." : "Salvar"}
    </Button>
  )
}

Overlay de carregamento

{isLoading && (
  <div className="absolute inset-0 flex items-center justify-center bg-background/50 rounded-[10px]">
    <Spinner size="lg" />
  </div>
)}

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter