Button

Primary CyberScor CTA — yellow fill, black label.

Variants

Anatomy

Radius: var(--radius) (0.5rem)
Font: UI stack (Roboto Neue / Roboto), weight 600
Padding default: 0.75rem 1.5rem
Large: up to 1rem 3rem, ~1.25rem type

React

tsx

import { Button } from "@scorton/ui";

<Button variant="primary" size="lg">
  Start Your CyberScor Assessment
</Button>

CSS classes

Class	Role
`.scorton-btn`	Base
`.scorton-btn--primary`	Yellow CTA
`.scorton-btn--ghost`	Subtle / chrome
`.scorton-btn--lg`	Hero size

Accessibility

Visible focus ring using --color-accent
Disabled at 50% opacity, pointer-events: none