Button — Sinapse Design System

Instalação

Importe direto da pasta de componentes do Design System.

import Button from "@/components/Button.astro";
// ou consume só as classes:
// <button class="itps-btn itps-btn--outline">Salvar</button>

Sizes

Três alturas alinhadas com form-height. Use md como default.

<Button size="sm">Small (40px)</Button>
<Button>Medium (48px)</Button>
<Button size="lg">Large (56px)</Button>

<template>
<button class="itps-btn itps-btn--outline itps-btn--sm">Small (40px)</button>
<button class="itps-btn itps-btn--outline">Medium (48px)</button>
<button class="itps-btn itps-btn--outline itps-btn--lg">Large (56px)</button>
</template>

export function Sizes() {
return (
  <>
    <button className="itps-btn itps-btn--outline itps-btn--sm">Small (40px)</button>
    <button className="itps-btn itps-btn--outline">Medium (48px)</button>
    <button className="itps-btn itps-btn--outline itps-btn--lg">Large (56px)</button>
  </>
);
}

<button class="itps-btn itps-btn--outline itps-btn--sm">Small (40px)</button>
<button class="itps-btn itps-btn--outline">Medium (48px)</button>
<button class="itps-btn itps-btn--outline itps-btn--lg">Large (56px)</button>

Estados

Hover sobre habilitados pra ver transição.

<Button>Default</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>

Com ícones

Use nome do Material Symbols em leftIcon ou rightIcon.

<Button leftIcon="add">Adicionar</Button>
<Button rightIcon="arrow_forward">Avançar</Button>
<Button leftIcon="download" rightIcon="open_in_new">Baixar relatório</Button>

Como link

Passe href e o componente vira <a>.

Ver estilos arrow_forward

<Button href="/estilos" rightIcon="arrow_forward">Ver estilos</Button>

Props

Prop	Tipo	Default	Descrição
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'outline'`	`'outline'`	Estilo visual.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altura do button.
`leftIcon`	`string`	—	Material Symbol antes do texto.
`rightIcon`	`string`	—	Material Symbol depois do texto.
`loading`	`boolean`	`false`	Spinner + disabled. Suprime ícones.
`disabled`	`boolean`	`false`	Bloqueia interação, opacidade 50%.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Atributo type do `<button>`.
`href`	`string`	—	Se presente, renderiza como `<a>`.
`ariaLabel`	`string`	—	Use quando o texto não descrever a ação.
`class`	`string`	—	Classes adicionais. Compõe com defaults.