---
title: "<Button>"
description: "A call-to-action — a styled, padded link that looks like a button."
url: https://www.unitpost.com/components/button
section: Components
updated: 2026-07-14
---
# <Button>

## <Button>

> A call-to-action — a styled, padded link that looks like a button.



```tsx
<Button href="https://example.com/verify?token={{token}}">Verify email</Button>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` (required) | url | # | Destination URL. {{variables}} are allowed. |
| `align` | enum | left | Horizontal alignment of the button. |
| `background-color` | color | #18181b | Button fill color. |
| `text-color` | color | #ffffff | Label color. |
| `border-radius` | number | 9999 | Corner radius (px). |
| `inner-padding-x` | number | 32 | Horizontal padding inside the button (px). |
| `inner-padding-y` | number | 12 | Vertical padding inside the button (px). |

## Related

- [<Link>](https://www.unitpost.com/components/link): A standalone styled hyperlink (no button background).
- [<Image>](https://www.unitpost.com/components/image): A responsive image, optionally wrapped in a link.
- [<Divider>](https://www.unitpost.com/components/divider): A thin horizontal rule to separate sections.