Components

Buttons

Three variants × three sizes. Primary (green #2ECE78) for affirmative actions, secondary for alternatives, ghost for lower emphasis.

Variants

Primary BG
#2ECE78
Primary Color
#FFFFFF · fw:700
Secondary Border
2px solid #C8CDD5
Ghost Border
2px solid transparent
Radius
10–14px
Icon size
18px · arrow-right / arrow-left

Sizes

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

{/* Variants — 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>

{/* Sizes — 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>

{/* Stretch to container */}
<CTAButton variant="primary" size="lg" fullWidth>
  Confirm payment
</CTAButton>
Props
  • variant
    Type
    'primary' | 'secondary' | 'ghost'
    Default
    'primary'
    Desc
    Visual treatment — primary (green fill), secondary (outlined), ghost (text-only).
  • size
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    Desc
    Height + padding + text scale (44 / 52 / 60).
  • type
    Type
    'button' | 'submit' | 'reset'
    Default
    'button'
    Desc
    Native button `type` attribute.
  • label
    Type
    string
    Default
    —
    Desc
    Accessible label for icon-only or ambiguous buttons (maps to `aria-label`).
  • fullWidth
    Type
    boolean
    Default
    false
    Desc
    Stretches the button to container width (mirrors the app `fullWidth` prop).
  • class
    Type
    string
    Default
    —
    Desc
    Extra classes appended to the root element.
  • slot: leading slot
    Type
    —
    Default
    —
    Desc
    Leading icon slot.
  • slot: (default) slot
    Type
    —
    Default
    —
    Desc
    Button label / children.
  • slot: trailing slot
    Type
    —
    Default
    —
    Desc
    Trailing icon slot.