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.

Example

Button component

<Button href="https://www.example.com">My button</Button>

Attributes

The <Button> component can be customized using the following attributes.

You can adjust the button's size with the size=".." attribute.

The size must be sm , md (default), or lg .

Small button

Medium button

Large button

Specifying the size of the button

// [!code word:size:1]
<Button size="lg" href="/">My button</Button>

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

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

Primary button

Secondary button

Outline button

Ghost button

Changing the style of the button

// [!code word:variant:1]
<Button variant="secondary" href="/">My button</Button>

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

My button

Making the button full width

// [!code word:width:1]
<Button width="full" href="/">My button</Button>

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

// [!code word:target:1]
<Button target="_blank" href="/">My button</Button>

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

// [!code word:class:1]
<Button class="my-custom-css">My button</Button>