Button Component
A <Button> acts just like a link, but is styled like a button. Also supports the target="_blank" attribute for opening links in new tabs.
Button component
<Button href="https://www.example.com">My button</Button>Attributes
The <Button> component can be customized using the following attributes.
Size
You can adjust the button's size with the size=".." attribute.
The size must be sm, md (default), or lg.
Specifying the size of the button
<Button size="lg" href="/">My button</Button>Variant
You can change the style of the button with the variant=".." attribute.
The variant must be primary (default), secondary, 'outline', or ghost.
Changing the style of the button
<Button variant="secondary" href="/">My button</Button>Width
You can make the button full width by specifying width="full".
Making the button full width
<Button width="full" href="/">My button</Button>Target
If you want your button to open the link in a new tab, you can set target="_blank".
Opening the link in a new tab
<Button target="_blank" href="/">My button</Button>Class
You can add a custom CSS class to the button using the class attribute. This is useful for applying custom styles to the button.
Custom class
<Button class="my-custom-css">My button</Button>