MarsalaDS
EstávelAçõesdesde v0.1.0

Button

Botão com variantes e tamanhos.

Quando usar

Ação principal, secundária ou destrutiva. Prefira variantes antes de CSS customizado.

Playground

Ajuste props ou edite o código em tempo real (componentes compatíveis).

Props documentadas: variant, size, disabled, className

import { Button } from "./button"

export default function App() {
  return (
    <div style={{ display: "flex", minHeight: 200, alignItems: "center", justifyContent: "center" }}>
      <Button>Botão Marsala</Button>
    </div>
  )
}
Open on CodeSandboxOpen Sandbox

Exemplos

Variações comuns de uso.

Variantes

Use variant para hierarquia de ações.

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

export function ButtonVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button>Primário</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secundário</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destrutivo</Button>
    </div>
  )
}

Com carregamento

Componha Spinner + disabled; não existe prop isLoading.

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

export function ButtonLoading() {
  return (
    <Button disabled>
      <Spinner data-icon="inline-start" />
      Salvando
    </Button>
  )
}

API

Props principais documentadas para o time.

PropTipoPadrãoDescrição
variant"default" | "outline" | "secondary" | "ghost" | "destructive" | "link"defaultEstilo visual do botão.
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"defaultTamanho e densidade.
disabledbooleanfalseDesativa interação.
classNamestring—Classes extras para layout (evite sobrescrever cores).

Instalação

pnpm dlx shadcn@latest add http://localhost:3000/r/button.json
pnpm dlx shadcn@latest add @youxgroup/button

Dependências

npm: cn

Relacionados

button-groupspinner