# Badge

{% hint style="success" %}
Free Macro
{% endhint %}

## Screenshot

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FmTXjbluo2l8Xi209yoqL%2Fimage2017-9-13_17-10-2.png?alt=media&#x26;token=6c9022c4-66c0-48bc-918d-2667936e5934" alt=""><figcaption></figcaption></figure>

## Description

The Badge looks much like a lozenge. You can define different styles and sizes and also combine it with a Heading or a Bootstrap button.

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FnVIoj7MtnNZBaCnPfBAp%2Fimage2017-9-13_17-12-46.png?alt=media&#x26;token=838499ee-5f31-44a4-9981-e86082bc8d89" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FErY1TajSr4EpPtgxWvJw%2Fimage2017-9-13_17-14-15.png?alt=media&#x26;token=37105cb4-5159-4b7c-adfa-4743ece4aa33" alt=""><figcaption></figcaption></figure>

## Adding the Macro

Edit your page.

Select “+” => Other macros

Type in “Bootstrap” in the Search box

Select the “Bootstrap Badge” macro

## Macro Options

<figure><img src="https://3271911861-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDHpX6TOKpku17lmsHem1%2Fuploads%2FfV094XV05VPyxsiD7xym%2Fimage2017-9-13_17-15-29-768x468.png?alt=media&#x26;token=4232bc03-ce37-4fce-8c82-a7274db11f1f" alt=""><figcaption></figcaption></figure>

### **Text**

Enter the text of the badge.

### **Style**

Select one of the [Bootstrap color styles](https://support.lewe.com/docs/bootstrap-visuals-for-confluence-manual/user-guide/bootstrap-color-styles/).

### **Type**

Select “Badge” or “Pill”. The pill will have more rounded corners.

### **Size**

Enter the size of the badge in percent. The default size is 75%.

### **Display as**

Select whether to make the Badge part of a Heading or a Bootstrap Button.

{% hint style="warning" %}
If you select a Heading and also use a plugin or macro that reads out the headings of your page, this heading will be included!
{% endhint %}

### **Button/Header Text**

If part of a Heading or Button, enter the prefix text here.

### **Upper Right Corner**

*<mark style="background-color:orange;">Only available in Badge 5</mark>*

With this option enabled, the badge will be shown in the upper right corner of the button. Only has an effect when displayed as a button.

### **Button style**

If part of a Button, select the button style here.

### **Button link**

If part of a Button, you can link the button to a URL. Enter it here and include http\:// or https\://.

### **Target**

Select where to load the linked page, in the same window or in a new tab.

### **Custom Text Color**

You can overwrite the Bootstrap text color here that is defined by the style you selected. You can enter any hexadecimal color value here, preceded by a hash, e.g. #990000.

### **Custom Background Color**

You can overwrite the Bootstrap background color here that is defined by the style you selected. You can enter any hexadecimal color value here, preceded by a hash, e.g. #990000.