Button
Dispara uma ação ou evento, como enviar um formulário, abrir um diálogo ou salvar dados.
'use client';
import { Button } from '@/components/ui/button';
export default function ButtonDemo() {
return <Button>Solicitar orçamento</Button>;
}Instalação
npx shadcn@latest add @lenstech/buttonUso
import { Button } from "@/components/ui/button"<Button variant="outline" onPress={() => salvar()}>
Salvar
</Button>Use onPress, não onClick
O Button é baseado no Button do React Aria: onPress funciona igual com mouse, toque e teclado,
e não dispara ao rolar a tela no celular.
Exemplos
Variantes
'use client';
import { Button } from '@/components/ui/button';
export default function ButtonVariants() {
return (
<div className="flex flex-wrap items-center justify-center gap-3">
<Button>Primário</Button>
<Button variant="secondary">Secundário</Button>
<Button variant="outline">Contorno</Button>
<Button variant="ghost">Fantasma</Button>
<Button variant="destructive">Excluir</Button>
<Button variant="link">Link</Button>
</div>
);
}Tamanhos
'use client';
import { Plus } 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">Pequeno</Button>
<Button>Padrão</Button>
<Button size="lg">Grande</Button>
<Button size="icon" aria-label="Adicionar">
<Plus />
</Button>
</div>
);
}Com ícone
'use client';
import { ArrowRight, Mail } from 'lucide-react';
import { Button } from '@/components/ui/button';
export default function ButtonWithIcon() {
return (
<div className="flex flex-wrap items-center justify-center gap-3">
<Button>
<Mail /> Fale conosco
</Button>
<Button variant="outline">
Ver projetos <ArrowRight />
</Button>
</div>
);
}Carregando
Use isPending para indicar que a ação está em andamento. O botão continua focável e anuncia o estado para leitores de tela.
'use client';
import { Loader2 } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
export default function ButtonLoading() {
const [pending, setPending] = useState(false);
return (
<Button
isPending={pending}
onPress={() => {
setPending(true);
setTimeout(() => setPending(false), 2000);
}}
>
{({ isPending }) =>
isPending ? (
<>
<Loader2 className="animate-spin" /> Enviando…
</>
) : (
'Enviar formulário'
)
}
</Button>
);
}Como link
Para navegação use LinkButton: ele renderiza um <a> real com a aparência de botão.
'use client';
import { ArrowUpRight } from 'lucide-react';
import { LinkButton } from '@/components/ui/button';
export default function ButtonLink() {
return (
<LinkButton href="https://lenstech.com.br" target="_blank" variant="outline">
Visitar site <ArrowUpRight />
</LinkButton>
);
}Quando usar
- Use para ações: enviar, salvar, abrir, confirmar.
- Não use para navegar entre páginas — use
LinkButtonouLink. - Tenha um único botão primário por área da tela; as demais ações usam
secondary,outlineoughost.
API
Button
Aceita todas as props do Button do React Aria, mais:
Prop
Type
LinkButton
Mesmas props de variant e size, mais todas as props do Link do React Aria (href, target, rel…).