Button
A button is a link drawn as a call to action, in the same three styles as the nav buttons in your top bar. It's made for a banner's row of actions, and works anywhere on a page.
Example
Get started
API reference
Status
mdx
<Button href="/guides/quickstart">Get started</Button>
<Button href="/api-reference" variant="outline">API reference</Button>
<Button href="https://status.acme.com" variant="plain">Status</Button>Props
hrefstringWhere it goes: a page on your site or any URL. External links open in a new tab. Without an href, it's the shape alone, which is what the editor shows before you type a link.
variantstringThe style.
| Value | Looks like |
|---|---|
primary | Filled in your brand colour |
outline | A thin grey outline, in the text colour |
plain | The label alone, which fills in on hover |
Over a banner's image, outline and plain turn white so they stay readable.
childrentextrequiredThe label, between the tags. A verb works best, such as "Get started".
Several in a row
Write buttons on the same line to keep them in a row. One primary button and one outline button is the usual pair: more than that, and none of them stands out.