Components

Button

Primary action component, replicated from Buttons/Button in Figma: 8px radius, Montserrat Semibold with -1px letter spacing, skeuomorphic shadow on the primary hierarchy, and the ADEK blue #003CFF (hover #002499).

Hierarchy

Five hierarchies from Figma: Primary, Secondary, Tertiary, Link color, and Link gray.

Sizes

sm (8/12), md (10/14), lg (10/16, text-md), xl (12/18, text-md) - paddings straight from the Figma variants.

With icons

20px leading/trailing icons with a 4px gap, plus square icon-only variants.

States

Default, disabled, and the loading state which shows the spinner and “Submitting…” exactly as the Figma State=Loading variants.

Props

PropTypeDefault
hierarchyprimary | secondary | tertiary | link-color | link-grayprimary
sizesm | md | lg | xlmd
destructivebooleanfalse
loadingbooleanfalse
iconLeading / iconTrailingReactNode / content projection-
iconOnlybooleanfalse