# 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="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-4dbcb7e85a4aac12be03ef1adf8bf140b2ef3f7a%2Fscreenshot-badge-1.png?alt=media" 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="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-ed5c9365834b221bed283ad2bb88697811e2ffae%2Fscreenshot-badge-2.png?alt=media" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" %}

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

{% endcode %}

<figure><img src="https://2850223474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOT4oO0pn3LrvJLuVbRqg%2Fuploads%2Fgit-blob-b1cca5618dad72c7702d562d028bca07ba616126%2Fscreenshot-badge-3.png?alt=media" 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* |