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 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
.
<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
.
<Button variant="secondary" href="/">My button</Button>
Width
You can make the button full width by specifying width="full"
.
<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"
.
<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.
<Button class="my-custom-css">My button</Button>