Components

Status

The Status component is a compact icon designed to visually indicate the current state of an element, such as online, offline, or error.

Basic example

Default

Basic example of `status` component.

Size

Status Sizes

Status sizes with `status-{xs|sm|md|lg|xl}` utility classes.

Color

Semantic colors

Pre-configured color status designs.

Animation

Bounce Animation

Use the `animate-bounce` utility to apply a bouncing animation to an element, creating a dynamic up-and-down motion. This effect is useful for drawing attention to interactive elements like buttons, notifications, or alerts.

Unread messages

Ping Animation

Include the `animate-ping` utility to enable an element to scale and fade, resembling a radar ping or water ripple effect, which is beneficial for features like attention to the alert.

Server is down

Pulse Animation

Use the `animate-pulse` utility to make an element pulse, drawing attention to important statuses like alerts or maintenance.

Under Maintenance

Illustrations

Status with progress

This example demonstrates how to integrate `status` with `progress` for better task visualization.

Initiated
In Progress
Completed
Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
statuscomponentStatus component
status-primarycolorStatus with 'primary' color.
status-secondarycolorStatus with 'secondary' color.
status-accentcolorStatus with 'accent' color.
status-infocolorStatus with 'info' color.
status-successcolorStatus with 'success' color.
status-warningcolorStatus with 'warning' color.
status-errorcolorStatus with 'error' color.
status-xssizeStatus with extra small size.
status-smsizeStatus with small size.
status-mdsizeStatus with medium (Default) size.
status-lgsizeStatus with large size.
status-xlsizeStatus with extra large size.