# Button

For the Button you can define different styles and sizes and and link it to a URL.

## Examples

{% code overflow="wrap" %}

```
[bsv-button style="info" size="xs"]X Small[/bsv-button]
```

{% endcode %}

<figure><img src="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-b6e30e43fb686dcea1f54c4fd2e6881efe41e37d%2Fscreenshot-button-xsmall.png?alt=media" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

```
[bsv-button customtextcolor="#ffffff" custombgcolor="#000099"]Custom Blue[/bsv-button]
```

{% endcode %}

<figure><img src="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-dd86efc57cd81d19d57c821e7cc7fa1dc3cb33ae%2Fscreenshot-button-custom-blue.png?alt=media" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

```
[bsv-button style="success" link="https://www.lewe.com" target="_blank" outline="yes" tooltip="Go to Lewe.com..."]Lewe.com[/bsv-button]
```

{% endcode %}

<figure><img src="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-241ea3c824765d089ef1efcf4570fff87dd68a11%2Fscreenshot-button-outline.png?alt=media" alt=""><figcaption></figcaption></figure>

## Format

{% code overflow="wrap" %}

```
[bsv-button parameter="value" ...]your content here[/bsv-button]
```

{% endcode %}

## Parameters

| Parameter       | Description                                                                                                                                                                             | Default    |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| style           | <p>Defines the Bootstrap style. Supported values:</p><ul><li>danger</li><li>dark</li><li>info</li><li>light</li><li>primary</li><li>secondary</li><li>success</li><li>warning</li></ul> | primary    |
| size            | <p>Button size other than default. Supported values:</p><ul><li>xs</li><li>sm</li><li>lg</li></ul>                                                                                      | *no value* |
| link            | The button can link to a URL. Define it here.                                                                                                                                           | *no value* |
| target          | <p>If a link is defined, this defines the target of the link. Supported values:</p><ul><li>\_blank</li><li>\_parent</li><li>\_self</li><li>\_top</li></ul>                              | \_self     |
| tooltip         | If a link is defined, this defines the tooltip of the button.                                                                                                                           | *no value* |
| outline         | <p>Displays the button in outline style. Supported values:</p><ul><li>no</li><li>yes</li></ul><p>This does not work in combination with ‘customtextcolor’ or ‘custombgcolor’.</p>       | no         |
| customtextcolor | If you want to change the text color of the button style you can do it here by proividng the hex color code in CSS format, e.g. #99000.                                                 | *no value* |
| custombgcolor   | If you want to change the background color of the button style you can do it here by proividng the hex color code in CSS format, e.g. #000099.                                          | *no value* |