Bulls Status Indicators

The Bulls component displays compact, clean status indicators as inline SVG icons. It is ideal for showcasing success, pending operations, failures, warnings, informational notifications, or glowing status bulbs (active nodes, connection diagnostics) across your application.

Standard Types

Success

Pending

Fail

Warning

Info

Glowing Bulbs

Online Node (Success)

Synced Server (Warning)

Offline Database (Danger)

Network Link (Info)

Custom Sizing

14px size 18px size (Default) 26px size 34px size

<!-- Standard Status Bullet Indicators -->
<span data-role="bull" data-type="success"></span> Success
<span data-role="bull" data-type="pending"></span> Pending
<span data-role="bull" data-type="fail"></span> Fail
<span data-role="bull" data-type="warning"></span> Warning
<span data-role="bull" data-type="info"></span> Info

<!-- Glowing Status Bulb Indicators -->
<span data-role="bull" data-type="bulb" data-color-class="bull-color-success"></span> Online
<span data-role="bull" data-type="bulb" data-color-class="bull-color-danger"></span> Offline

<!-- Custom Sizes -->
<span data-role="bull" data-type="success" data-size="28"></span> Custom Size

Markup & Configuration

Add data-role="bull" to a <span> element to initialize the component.
Use data-type to select the status icon: success, pending, fail, warning, or info.
Specify data-type="bulb" to render a glowing status dot. Configure its color class via data-color-class (e.g. bull-color-success, bull-color-danger, etc.).
Configure the SVG icon dimension (width/height in pixels) using data-size. Defaults to 18.