Skip to content

button

renderButton({ label, href, attributes }) renders a native link when href is present, otherwise a type="button" control. Labels are escaped. Both inherit the page’s family, use the personal site’s pill surface, and retain native keyboard activation and the family focus ring. Hover and keyboard focus take the settings accent surface; press scales to .98; reduced motion disables transitions. Contract: docs/contract/components/button.md.

renderButton({ label: "App Store", href: "https://apps.apple.com/app/id1525123200" })

variant defaults to plain; primary uses the kit fill and secondary uses glass with tint ink. size defaults to canonical; large carries the app landing geometry including the phone padding override. trailingLabel is an optional decorative arrow. Passing class through attributes is a named renderer error.

button · light
button · dark
native · light
native · dark
primary · light
primary · dark
secondary · light
secondary · dark