Status Dot Component

htmlcsscomponentsUI

Some time ago, I came across a small UI component that used a dot to indicate a status. I found it to be a delightful little component worth building myself. Therefore, I went ahead and created it.

You can see the outcome in the following CodePen example.

See the Pen Status Badge Animated by Wonky (@Wonky) on CodePen.

Options

This component offers several functionalities:

  1. Customizable Colors and Sizes: The component can be configured with different colors and sizes for the dot, providing flexibility in design.

  2. Animated State: When the component represents a live item, it can display an animated effect to indicate its real-time status.

    • data-status Attribute: The component utilizes a data-status attribute to set the status of the item. Depending on the value of this attribute, the color of the dot will be adjusted accordingly:
    • If data-status="live", the dot will be displayed in green.
    • If data-status="offline", the dot will be shown in red.

  3. By combining these features, the component becomes a versatile and visually informative element that can adapt to different scenarios and communicate the status of the item effectively.