<.badge id="badge-single-default" text="Badge" phx-click="badge click" />

<.badge id="badge-colors-primary" text="primary" color={:primary} />
<.badge id="badge-colors-info" text="info" color={:info} />
<.badge id="badge-colors-success" text="success" color={:success} />
<.badge id="badge-colors-warning" text="warning" color={:warning} />
<.badge id="badge-colors-danger" text="danger" color={:danger} />

<.badge id="badge-outline-badge-primary" text="primary" color={:primary} outline />
<.badge id="badge-outline-badge-info" text="info" color={:info} outline />
<.badge id="badge-outline-badge-success" text="success" color={:success} outline />
<.badge id="badge-outline-badge-warning" text="warning" color={:warning} outline />
<.badge id="badge-outline-badge-danger" text="danger" color={:danger} outline />

<.badge id="badge-icons-fa fa-skull" text="fa fa-skull" icon="fa fa-skull" />
<.badge id="badge-icons-fa fa-alicorn" text="fa fa-alicorn" icon="fa fa-alicorn" />

<.badge id="badge-sizes-normal" text="Normal size" />
<.badge id="badge-sizes-small" text="Small size" small />

<.badge id="badge-single-tooltip" text="With a tooltip" tooltip="Hello World" />