Um componente de botão flexível com múltiplas variantes, tamanhos, estados de loading e suporte a ícones. Perfeito para ações e interações do usuário.
Primary, secondary, accent, neutral, ghost, link, outline, success, warning, error, info
xs, sm, md, lg para diferentes contextos
Spinner automático quando loading está ativo
Ícones à esquerda e/ou direita do texto
npm install molde-ui
# or
pnpm add molde-ui
# or
yarn add molde-uiimport { Button } from 'molde-ui';
import 'molde-ui/styles';
function App() {
return (
<div className="flex gap-4">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="accent">Accent</Button>
<Button variant="outline">Outline</Button>
<Button loading>Loading</Button>
<Button leftIcon={<Icon />}>With Icon</Button>
</div>
);
}| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | ReactNode | - | Conteúdo do botão |
| variant | 'primary' | 'secondary' | 'accent' | 'neutral' | 'ghost' | 'link' | 'outline' | 'success' | 'warning' | 'error' | 'info' | 'primary' | Variante visual do botão |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Tamanho do botão |
| fullWidth | boolean | false | Botão ocupa toda a largura disponível |
| loading | boolean | false | Exibe spinner e desabilita o botão |
| leftIcon | ReactNode | - | Ícone à esquerda do texto |
| rightIcon | ReactNode | - | Ícone à direita do texto |
| disabled | boolean | false | Desabilita o botão |
| className | string | '' | Classes CSS adicionais |