Buttons

A flexible action component supporting variants, sizes, icons, and links.

Buttons help users initiate actions or navigate to other pages. Use variants to convey emphasis, size for hierarchy, and icons to add clarity.

Button Usage

You can use the Button component directly within your MDX files without any import. The following examples show basic usage:

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>

<Button size="default">Default size</Button>
<Button size="big">Big size</Button>

<Button outline>Outlined</Button>

<Button fullWidth>Full width button</Button>

<Button icon="arrow-right" iconPosition="left">With left icon</Button>
<Button icon="arrow-right" iconPosition="right">With right icon</Button>

Buttons can render as links when you provide an href.

<Button href="/">Home</Button>

childrennoderequired

The content of the button.

variantstring

Controls visual emphasis.

sizestring

Controls the size of the button.

outlineboolean

When true, renders the outlined style of the selected variant.

fullWidthboolean

When true, the button expands to the full width of its container.

iconstring

Optional icon to display inside the button.

iconPositionstring

The position of the icon relative to the text.

hrefstring

When provided, the button renders as a link (<a>), enabling navigation.