Badge

Just a badge component, with colors.

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