componentes / ações

Button

Botão com variantes, tamanhos, estado de carregamento e opção de renderizar como link.

1.2 kB gzip client componentbase ui · button

button-default.tsx

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

export default function ButtonDefault() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button>save</Button>
      <Button variant="brand">get started</Button>
      <Button variant="outline">cancel</Button>
      <Button variant="ghost">dismiss</Button>
      <Button variant="destructive">delete</Button>
      <Button variant="link">learn more</Button>
    </div>
  );
}

Instalação

$ npx shadcn@latest add https://cd-ui.vercel.app/r/button.json

primeira vez? configure o components.json e o tema antes: veja instalação.

Uso

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

<Button variant="brand">get started</Button>

Exemplos

Tamanhos

Três alturas e dois tamanhos quadrados pra ícone.

button-sizes.tsx

import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button size="sm">small</Button>
      <Button size="md">medium</Button>
      <Button size="lg">large</Button>
      <Button aria-label="Add" size="icon" variant="outline">
        <PlusIcon aria-hidden="true" />
      </Button>
    </div>
  );
}

Carregando

loading troca o conteúdo por um spinner sem mudar a largura do botão e bloqueia cliques repetidos.

button-loading.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export default function ButtonLoading() {
  const [loading, setLoading] = useState(false);

  return (
    <Button
      loading={loading}
      onClick={() => {
        setLoading(true);
        setTimeout(() => setLoading(false), 1500);
      }}
      variant="brand"
    >
      publish project
    </Button>
  );
}

Tecla

A variante key parece uma tecla de teclado: a borda de baixo é uma sombra que some ao pressionar.

button-key.tsx

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

export default function ButtonKey() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button variant="key">Ctrl</Button>
      <Button variant="key">K</Button>
      <Button size="sm" variant="key">
        Esc
      </Button>
      <Button size="icon" variant="key">
        ↵
      </Button>
    </div>
  );
}

Como link

Com render, o botão vira um <a> (ou <Link> do Next) com o mesmo visual.

open on github

button-link.tsx

import { ArrowUpRightIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function ButtonLink() {
  return (
    <Button nativeButton={false} render={<a href="https://github.com/di0rio" rel="noopener noreferrer" target="_blank" />} variant="outline">
      open on github <ArrowUpRightIcon aria-hidden="true" />
    </Button>
  );
}

API

Button

Base UI · Button

Botão nativo com variantes. Aceita todas as props do Button do Base UI.

prop	tipo	padrão
`variant` Estilo visual.	`"default" \| "brand" \| "outline" \| "ghost" \| "link" \| "destructive" \| "key"`	`"default"`
`size` Altura e espaçamento.	`"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"`	`"md"`
`loading` Mostra o spinner, mantém a largura, marca `aria-busy` e bloqueia cliques (o botão continua focável).	`boolean`	`false`
`nativeButton` Passe `false` quando usar `render` com um elemento que não é `<button>`.	`boolean`	`true`
`render` Troca o elemento renderizado mantendo comportamento e estilo (ex.: virar `<a>` ou `<Link>`).	`ReactElement \| (props) => ReactElement`	-
`className` Classes extras, mescladas com `cn` (a sua vence).	`string`	-

Teclado

tecla	ação
`EnterSpace`	Ativa o botão.

Acessibilidade

Botões só com ícone precisam de aria-label.
Durante loading o botão segue focável (focusableWhenDisabled), então o foco não pula pra outro lugar.

import { Button } from "@/components/ui/button"; export default function ButtonDefault() { return ( <div className="flex flex-wrap items-center justify-center gap-3"> <Button>save</Button> <Button variant="brand">get started</Button> <Button variant="outline">cancel</Button> <Button variant="ghost">dismiss</Button> <Button variant="destructive">delete</Button> <Button variant="link">learn more</Button> </div> ); }

Exemplos

Tamanhos

Três alturas e dois tamanhos quadrados pra ícone.

button-sizes.tsx

import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button size="sm">small</Button>
      <Button size="md">medium</Button>
      <Button size="lg">large</Button>
      <Button aria-label="Add" size="icon" variant="outline">
        <PlusIcon aria-hidden="true" />
      </Button>
    </div>
  );
}

Carregando

loading troca o conteúdo por um spinner sem mudar a largura do botão e bloqueia cliques repetidos.

button-loading.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export default function ButtonLoading() {
  const [loading, setLoading] = useState(false);

  return (
    <Button
      loading={loading}
      onClick={() => {
        setLoading(true);
        setTimeout(() => setLoading(false), 1500);
      }}
      variant="brand"
    >
      publish project
    </Button>
  );
}

Tecla

A variante key parece uma tecla de teclado: a borda de baixo é uma sombra que some ao pressionar.

button-key.tsx

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

export default function ButtonKey() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button variant="key">Ctrl</Button>
      <Button variant="key">K</Button>
      <Button size="sm" variant="key">
        Esc
      </Button>
      <Button size="icon" variant="key">
        ↵
      </Button>
    </div>
  );
}

Como link

Com render, o botão vira um <a> (ou <Link> do Next) com o mesmo visual.

open on github

button-link.tsx

import { ArrowUpRightIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function ButtonLink() {
  return (
    <Button nativeButton={false} render={<a href="https://github.com/di0rio" rel="noopener noreferrer" target="_blank" />} variant="outline">
      open on github <ArrowUpRightIcon aria-hidden="true" />
    </Button>
  );
}

API

Button

Base UI · Button

Botão nativo com variantes. Aceita todas as props do Button do Base UI.

prop	tipo	padrão
`variant` Estilo visual.	`"default" \| "brand" \| "outline" \| "ghost" \| "link" \| "destructive" \| "key"`	`"default"`
`size` Altura e espaçamento.	`"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"`	`"md"`
`loading` Mostra o spinner, mantém a largura, marca `aria-busy` e bloqueia cliques (o botão continua focável).	`boolean`	`false`
`nativeButton` Passe `false` quando usar `render` com um elemento que não é `<button>`.	`boolean`	`true`
`render` Troca o elemento renderizado mantendo comportamento e estilo (ex.: virar `<a>` ou `<Link>`).	`ReactElement \| (props) => ReactElement`	-
`className` Classes extras, mescladas com `cn` (a sua vence).	`string`	-

tecla

ação

EnterSpace

Ativa o botão.