Badge

Add a badge to your page or inside elements

Example Syntax

<heading>Example heading <badge>New</badge></heading>
<heading 2>Example heading <badge>New</badge></heading>
<heading 3>Example heading <badge>New</badge></heading>
<heading 4>Example heading <badge>New</badge></heading>
<heading 5>Example heading <badge>New</badge></heading>
<heading 6>Example heading <badge>New</badge></heading>

Button badges

<button large>Notifications <badge light>4</badge></button>

Button styles

<badge primary>Primary</badge>
<badge secondary>Secondary</badge>
<badge success>Success</badge>
<badge danger>Danger</badge>
<badge warning>Warning</badge>
<badge info>Info</badge>
<badge light>Light</badge>
<badge dark>Dark</badge>

Button styles (pill)

<badge primary>Primary</badge>
<badge secondary>Secondary</badge>
<badge success>Success</badge>
<badge danger>Danger</badge>
<badge warning>Warning</badge>
<badge info>Info</badge>
<badge light>Light</badge>
<badge dark>Dark</badge>

Button common attributes

<badge primary shadow>Primary</badge>
<badge primary width=10em>Primary</badge>
<badge primary width=10em text-right>Primary</badge>
<badge primary width=10em text-left>Primary</badge>

Attributes

pill: Uses the pill style for the badge (rounded corners)