> For the complete documentation index, see [llms.txt](https://lewe.gitbook.io/lewe-bootstrap-visuals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewe.gitbook.io/lewe-bootstrap-visuals/shortcodes/button.md).

# 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="/files/8HGAoCOsfrVurkCxdz9w" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="/files/N8Q6rzRisf4f04MzOuza" 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="/files/qXq0HhAElKmIJGy6keWv" 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* |