Button
Add a clear call to action or a styled documentation link.
Loading documentation…
Powered by heyo
Button gives a documentation call to action the same visual language as the
rest of the site. Add href to render a link, or omit it for a regular button
when the page supplies an interaction. The component handles the layout around
the control, so it can sit naturally between blocks of MDX content.
Use the default variant for the primary next step. outline, secondary, and
ghost work well for supporting actions, while destructive should be limited
to irreversible or dangerous actions. Use align to place a standalone action
in the reading column.
For external destinations, set target="_blank"; the component adds a safe
noreferrer relationship unless you supply a different rel value.
Pair a primary action with supporting choices when a reader reaches a natural decision point in a guide.
Ready to publish?
Validate the site locally, then send it to your preferred host.
Makes the button render as a link to this destination. Omit it for a native button.
Selects the visual importance of the action. It defaults to
default.
Controls the button's size. It defaults to default.
Positions the button inside the documentation column. It defaults to
left.
The link target. Use _blank when the destination should open in
another tab.
The relationship applied to a linked button. External targets default to
noreferrer.
Disables a native button and prevents interaction.
The action label or inline content.