ButtonLink
A link for navigating that looks like a button.
Use ButtonLink to create a link that looks like a button.
By default, ButtonLink routes using NextJS. To disable this and use regular links, see Disabling Next Routing.
Ghost Buttons
Use ghost to remove the background and borders from the buttons.
Bleeding For Alignment
Ghost buttons have an invisible spacing around them that would not align flush with other elements. In such cases you can use bleedH to remove the spacing horizontally and bleedV to remove the spacing on the top and bottom. You can use bleed as a shorthand for both directions.
This has no impact on non-ghost variants.
Sizes
Use size to set the size of the button link.
Full Width
Use fullWidth to make the button fill the width of its container.
Icons
Use startIcon or endIcon to add an icon to either side of the button.
Dark Background
Use onColor as variant when button is placed over a colored background. The property ghost has no effect when onColor is used.
Disabling Next Routing
Use the noNext property to disable the NextJS routing. This can be useful for links to pages that are routed outside of NextJS.