- Folder
- src/components/Button/
- Props
- variant: primary | ghost (default primary)
- href: renders a link; next/link for site pages, a plain anchor for files such as /Tony_CJ_Resume.pdf, # and external
- onClick: used when there is no href, renders a button
- arrow (default true for primary, false for ghost)
- Tokens
- Primary: Tangerine fill, Ink text, Accent Hover fill on hover and focus
- Ghost: Line border, Text color, Surface Lift on hover and focus, Surface Hover when pressed
- text-title, full radius, 20 px side padding
- Motion
- Background, color and scale 150 ms standard; arrow 75 ms translate; under reduced motion the pill does not scale and the arrow jumps to its hover position at once, the colour fades stay
- Accessibility
- Ink on tangerine 5.84:1 at rest, 7.77:1 on hover and focus in both schemes
- Pressed shown on :active
- Min height 44 px
- Arrow is hidden from screen readers