Componentes

Botões

Três variantes × três tamanhos. Primary (verde #2ECE78) para ações afirmativas, secondary para alternativas, ghost para menor ênfase.

Variantes

Fundo do primary
#2ECE78
Cor do primary
#FFFFFF · fw:700
Borda do secondary
2px solid #C8CDD5
Borda do ghost
2px solid transparent
Radius
10–14px
Tamanho do ícone
18px · arrow-right / arrow-left

Tamanhos

Altura sm
44px
Padding sm
0 20px
Fonte sm
14px / r:10
Altura md
52px
Padding md
0 28px
Fonte md
16px / r:12
Altura lg
60px
Padding lg
0 36px
Fonte lg
18px / r:14
Uso
---
import CTAButton from '@/components/kiosk/CTAButton.astro';
import KioskIcon from '@/components/icons/KioskIcon.astro';
---

{/* Variantes — primary / secondary / ghost */}
<CTAButton variant="primary" size="lg">
  Continue
  <KioskIcon slot="trailing" name="arrow-right" size={18} />
</CTAButton>

<CTAButton variant="secondary" size="lg">
  <KioskIcon slot="leading" name="arrow-left" size={18} />
  Back
</CTAButton>

<CTAButton variant="ghost" size="lg">Cancel</CTAButton>

{/* Tamanhos — sm (44) · md (52) · lg (60) */}
<CTAButton variant="primary" size="sm">Small</CTAButton>
<CTAButton variant="primary" size="md">Medium</CTAButton>
<CTAButton variant="primary" size="lg">Large</CTAButton>

{/* Estica até a largura do container */}
<CTAButton variant="primary" size="lg" fullWidth>
  Confirm payment
</CTAButton>
Props
  • variant
    Tipo
    'primary' | 'secondary' | 'ghost'
    Padrão
    'primary'
    Desc
    Tratamento visual — primary (preenchimento verde), secondary (contornado), ghost (só texto).
  • size
    Tipo
    'sm' | 'md' | 'lg'
    Padrão
    'md'
    Desc
    Altura + padding + escala de texto (44 / 52 / 60).
  • type
    Tipo
    'button' | 'submit' | 'reset'
    Padrão
    'button'
    Desc
    Atributo `type` nativo do botão.
  • label
    Tipo
    string
    Padrão
    —
    Desc
    Label acessível para botões só de ícone ou ambíguos (mapeia para `aria-label`).
  • fullWidth
    Tipo
    boolean
    Padrão
    false
    Desc
    Estica o botão até a largura do container (espelha a prop `fullWidth` do app).
  • class
    Tipo
    string
    Padrão
    —
    Desc
    Classes extras anexadas ao elemento raiz.
  • slot: leading slot
    Tipo
    —
    Padrão
    —
    Desc
    Slot do ícone leading.
  • slot: (default) slot
    Tipo
    —
    Padrão
    —
    Desc
    Label / conteúdo do botão.
  • slot: trailing slot
    Tipo
    —
    Padrão
    —
    Desc
    Slot do ícone trailing.