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.

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.

Variant

You can change the style of the button with the variant=".." attribute.

The variant must be primary (default), secondary, 'outline', or ghost.

Width

You can make the button full width by specifying width="full".

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>