Using Buttons

Buttons can act as clickable actions or as styled links. Add this to any .mdx file:

import { Accordion, Button, Callout, Carousel, Center, ImageGrid, Img, Instagram, Marquee, YouTube, SideBySide, Left, Right } from '@mdx';

<Button content="Click me" />
<Button content="Visit our page" href="/about-us" />

When you add href, the button renders as a link. Without it, it’s a regular button.

Variants

Three visual styles — primary (default), secondary, and inverse:

<Button content="Primary" variant="primary" />
<Button content="Secondary" variant="secondary" />
<Button content="Inverse" variant="inverse" />

Sizes

Three sizes — standard (default), large, and xlarge:

<Button content="Standard" size="standard" />
<Button content="Large" size="large" />
<Button content="XLarge" size="xlarge" />

Required Fields

Optional Fields