> 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/badge.md).

# Badge

A Badge looks much like a lozenge. You can define different styles and sizes and also combine it with an HTML heading or a Bootstrap button. The shortcode adds a element. If you need an empty space before or after you need to add it manually.

## Examples

{% code overflow="wrap" %}

```
[bsv-badge style="danger"]New![/bsv-badge]
```

{% endcode %}

<figure><img src="/files/LWQe1O2KCSYFPljH9Ubc" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

```
[bsv-badge style="warning" displayas="button" buttonlink="https://www.lewe.com" target="_blank" prefix="Button"]1234[/bsv-badge]
```

{% endcode %}

<figure><img src="/files/OU12YU7VsvLwHX35BUKz" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

```
[bsv-badge style="success" type="pill" displayas="h4" prefix="Button"]1234[/bsv-badge]
```

{% endcode %}

<figure><img src="/files/2tp5mOkcsmSV4OPHOnJN" alt=""><figcaption></figcaption></figure>

## Format

{% code overflow="wrap" %}

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

{% 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    |
| type            | <p>Allowed values:</p><ul><li>badge</li><li>pill</li></ul>                                                                                                                                                                                                                                  | badge      |
| displayas       | <p>The badge can be combined with a button or heading. Supported values:</p><ul><li>button</li><li>h1</li><li>h2</li><li>h3</li><li>h4</li><li>h5</li><li>h6</li></ul>                                                                                                                      | *no value* |
| prefix          | <p>If combined with a button or heading, this will be the text of it.</p><p>This parameter only works in combination with a displayas value.</p>                                                                                                                                            | *no value* |
| buttonstyle     | <p>If combined with a button, this defines the button 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><p>This parameter only works in combination with a displayas value.</p> | primary    |
| buttonlink      | If combined with a button, the button can link to a URL. Define it here.                                                                                                                                                                                                                    | *no value* |
| target          | If combined with a linked button, this defines the target of the link.                                                                                                                                                                                                                      | \_self     |
| customtextcolor | If you want to change the text color of the badge style you can do it here by providing the hex color code in CSS format, e.g. #99000.                                                                                                                                                      | *no value* |
| custombgcolor   | If you want to change the background color of the badge style you can do it here by proividng the hex color code in CSS format, e.g. #000099.                                                                                                                                               | *no value* |