BUTTON

Source: design-system/components/Button/Button.tsx. React Server Component, zero client JavaScript.

Props

Prop	Type	Default	Required
Prop`variant`	Type`'primary' \| 'secondary'`	Default`'primary'`	Requiredno
Prop`size`	Type`'sm' \| 'md' \| 'lg'`	Default`'md'`	Requiredno
Prop`as`	Type`'button' \| 'a'`	Default`'button'`	Requiredno
Prop`href`	Type`string`	Defaultnone	Requiredyes when `as="a"`
Prop`disabled`	Type`boolean`	Default`false`	Requiredno

Variants

EXEC_HIRE DOWNLOAD_CV

SOURCE

<Button variant="primary" as="a" href="#variants">EXEC_HIRE</Button>
  <Button variant="secondary" as="a" href="#variants">DOWNLOAD_CV</Button>

Sizes

SM MD LG

SOURCE

<Button size="sm" as="a" href="#sizes">SM</Button>
  <Button size="md" as="a" href="#sizes">MD</Button>
  <Button size="lg" as="a" href="#sizes">LG</Button>

Small and medium buttons have a 44px minimum height. Large buttons have a 52px minimum height.

Disabled

SOURCE

<Button disabled>DISABLED</Button>

An anchor cannot be natively disabled. With as="a" and disabled, the button drops href, sets aria-disabled="true", leaves the tab order and cancels click. That path attaches a click handler, so it is used from client components only.

Accessibility

Every size meets the 44px target. Keyboard focus shows a 2px signal outline with a 2px offset through :focus-visible. This component defaults type to "button", opting out of the browser's implicit submit inside a <form>.