Button

TSX

<Button
  href="https://example.com"
  backgroundColor="#0879A1"
  color="#ffffff"
  hoverBackgroundColor="#065c79"
  fontSize="14px"
  fontWeight={500}
  padding="12px 24px"
  borderRadius="6px"
  textAlign="center"
>
  Get Started
</Button>

Prop	Type	Default
text	string	"Button" (or use children)
href	string | Href	—
backgroundColor	string	"#0879A1"
color	string	"#FFFFFF"
hoverBackgroundColor	string	"#0879A1" (same as base — set explicitly for a visible hover)
hoverColor	string	"#FFFFFF" (same as base)
fontSize	string	"14px"
fontWeight	number	400
fontFamily	{ label: string, value: string }	—
lineHeight	string	"120%"
padding	string	"10px 20px"
borderRadius	string	"4px"
textAlign	"left" | "center" | "right"	"center"

href accepts a plain string (auto-wrapped) or { name: "web", values: { href, target } } if you need target control.

A note on textAlign: only <Heading> and <Paragraph> actually justify the rendered output (text-align: justify). <Button>, <Image>, and <Divider> accept the value at the type level but it has no visible effect, so their tables list only the three values that take effect.

Controlling Button Width

Button width is controlled by the size value (default { autoWidth: true, width: "100%" }). For a fixed-width button, pass it via the values escape hatch:

<Button
  href="https://example.com"
  values={{ size: { autoWidth: false, width: '240px' } }}
>
  Get Started
</Button>