- 1.4.1

Badge

Just a badge component, with colors.

Read more Read less

Here's some example CSS:

.component {
  color: pink;
}
Default badge
Open in playground

Your variations can be accompanied with an optional note.

You can use markdown syntax in your text.

Default badge 
<.badge text="Default badge" data-foo="bar" qix={42} />
With predefined colors
Open in playground

Notes also work with VariationGroup.

Predefined color Predefined color Predefined color Predefined color Predefined color 
<.badge text="Predefined color" color={:info} />
<.badge text="Predefined color" color={:primary} />
<.badge text="Predefined color" color={:success} />
<.badge text="Predefined color" color={:warning} />
<.badge text="Predefined color" color={:danger} />
With predefined colors, but small
Open in playground
Same but small Same but small Same but small Same but small Same but small 
<.badge text="Same but small" small color={:info} />
<.badge text="Same but small" small color={:primary} />
<.badge text="Same but small" small color={:success} />
<.badge text="Same but small" small color={:warning} />
<.badge text="Same but small" small color={:danger} />
With custom colors
Open in playground
Custom color Custom color Custom color 
<.badge text="Custom color" hex_color="#FC08CB" />
<.badge text="Custom color" hex_color="#996CC0" />
<.badge text="Custom color" hex_color="#7CACDD" />
With FontAwesome icons
Open in playground
fa fa-alicorn fa fa-bolt fas fa-skull 
<.badge text="fa fa-alicorn" icon="fa fa-alicorn" />
<.badge text="fa fa-bolt" icon="fa fa-bolt" />
<.badge text="fas fa-skull" icon="fas fa-skull" />
With FontAwesome icons, but small
Open in playground
fa fa-alicorn fa fa-bolt fas fa-skull 
<.badge text="fa fa-alicorn" small icon="fa fa-alicorn" />
<.badge text="fa fa-bolt" small icon="fa fa-bolt" />
<.badge text="fas fa-skull" small icon="fas fa-skull" />