Live Storybook

Badge

Just a badge component, with colors.

Default badge Open in playground
Default badge 
<.badge id="badge-single-default-badge" text="Default badge" data-foo="bar" qix={42} theme={:default}/>
With predefined colors Open in playground
Predefined color Predefined color Predefined color Predefined color Predefined color 
<.badge id="badge-predefined-colors-info" text="Predefined color" color={:info} theme={:default}/>
<.badge id="badge-predefined-colors-primary" text="Predefined color" color={:primary} theme={:default}/>
<.badge id="badge-predefined-colors-success" text="Predefined color" color={:success} theme={:default}/>
<.badge id="badge-predefined-colors-warning" text="Predefined color" color={:warning} theme={:default}/>
<.badge id="badge-predefined-colors-danger" text="Predefined color" color={:danger} theme={:default}/>
With predefined colors, but small Open in playground
Same but small Same but small Same but small Same but small Same but small 
<.badge id="badge-small-predefined-colors-info" text="Same but small" small color={:info} theme={:default}/>
<.badge id="badge-small-predefined-colors-primary" text="Same but small" small color={:primary} theme={:default}/>
<.badge id="badge-small-predefined-colors-success" text="Same but small" small color={:success} theme={:default}/>
<.badge id="badge-small-predefined-colors-warning" text="Same but small" small color={:warning} theme={:default}/>
<.badge id="badge-small-predefined-colors-danger" text="Same but small" small color={:danger} theme={:default}/>
With custom colors Open in playground
Custom color Custom color Custom color 
<.badge id="badge-custom-colors-#-fc08-cb" text="Custom color" theme={:default} hex_color="#FC08CB"/>
<.badge id="badge-custom-colors-#996-cc0" text="Custom color" theme={:default} hex_color="#996CC0"/>
<.badge id="badge-custom-colors-#7-cacdd" text="Custom color" theme={:default} hex_color="#7CACDD"/>
With FontAwesome icons Open in playground
fa fa-alicorn fa fa-bolt fas fa-skull 
<.badge id="badge-icons-fa fa-alicorn" text="fa fa-alicorn" icon="fa fa-alicorn" theme={:default}/>
<.badge id="badge-icons-fa fa-bolt" text="fa fa-bolt" icon="fa fa-bolt" theme={:default}/>
<.badge id="badge-icons-fas fa-skull" text="fas fa-skull" icon="fas fa-skull" theme={:default}/>
With FontAwesome icons, but small Open in playground
fa fa-alicorn fa fa-bolt fas fa-skull 
<.badge id="badge-small-icons-fa fa-alicorn" text="fa fa-alicorn" small icon="fa fa-alicorn" theme={:default}/>
<.badge id="badge-small-icons-fa fa-bolt" text="fa fa-bolt" small icon="fa fa-bolt" theme={:default}/>
<.badge id="badge-small-icons-fas fa-skull" text="fas fa-skull" small icon="fas fa-skull" theme={:default}/>