Botão
AlpopButton é o botão principal, com variantes, estado compacto, ícone e estado de carregamento. Cada variante corresponde a um botão real das telas em produção.
Variantes
primary: preenchimento sólido ("Nova consulta", "Enviar arquivo").secondary: contorno com borda primária, tinge o fundo no hover (o botão "Ver detalhes").outline: contorno com borda primária, mas inverte para preenchimento sólido no hover (o botão "Cancelar" do modal de nova consulta).card: ação dentro de card, mais pesada (caixa alta, peso 800, raio menor), como nos cards de Consultas.danger: destrutivo suave, com texto vermelho sobre fundo levemente avermelhado, sem borda (o botão "Desistir do contrato").
pug
alpop-button(variant="primary", icon="plus") Nova consulta
alpop-button(variant="secondary", icon="externalLink") Ver detalhes
alpop-button(variant="outline") Cancelar
alpop-button(variant="card", icon="clipboard") Análise manual
alpop-button(variant="danger") Desistir do contratoA ação sólida dentro de card combina card com primary:
Compacto
compact reduz a altura de 4rem para 3.2rem, o tamanho usado no botão "Ver detalhes" das tabelas.
Carregando
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | String | "primary" | primary, secondary, outline, card, danger |
compact | Boolean | false | Reduz a altura para 3.2rem |
icon | String | null | Nome do ícone (ver AlpopIcon) |
loading | Boolean | false | Exibe spinner e desabilita o botão |
disabled | Boolean | false | Desabilita o botão |
block | Boolean | false | Ocupa toda a largura |
type | String | "button" | Atributo type nativo |
Eventos
| Evento | Payload | Descrição |
|---|---|---|
click | MouseEvent | Emitido ao clicar |