Phoenix Storybook

Badge

Just a badge component, with colors.

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