---json
{
    "page_id": "kk4jppbr858gkbpeqxo1p",
    "title": "How to create a badge with Combo ?"
}
---

====== How to create a badge ?  ======


===== About =====
''badge'' is a [[docs:component|ComboStrap UI component]] that shows a small status descriptors such as:
  * a count
  * or a label


===== Syntax =====
''badge'' follows the [[docs:marki|superset HTML syntax]] and can then be [[docs:styling:styling|customized]]

  * Full Qualified Syntax
<code dw>
<badge type="type" rounded>Text</badge>
</code>

  * Short Syntax
<code dw>
<badge type rounded>Text</badge>
</code>

where:
  * ''type'' defines the color
  * ''rounded'' will give a look more rounded (Default: true)
===== Type =====

A badge may have the following type:

Functional:
  * <badge success>success</badge> 
  * <badge danger>danger</badge>
  * <badge warning>warning</badge>
  * <badge>info</badge> (Default)
  * <badge tip>tip</badge>

Visual:
  * <badge primary>primary</badge>
  * <badge secondary>secondary</badge>
  * <badge light>light</badge>
  * <badge dark>dark</badge>


===== Configuration =====

==== defaultBadgeAttributes ====
''defaultBadgeAttributes'' is a [[docs:app:configuration|configuration]] that defines the default badge attributes

Default value:
<code html>
type="info" rounded="true"
</code>