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.
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>The content of the button.
Controls visual emphasis.
Controls the size of the button.
When true, renders the outlined style of the selected variant.
When true, the button expands to the full width of its container.
Optional icon to display inside the button.
The position of the icon relative to the text.
When provided, the button renders as a link (<a>), enabling navigation.