components
Tailwind CSS 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 of status component.
<span class="status"></span>Status sizes with status-{xs|sm|md|lg|xl} utility classes.
<div aria-label="status" class="status status-xs"></div>
<div aria-label="status" class="status status-sm"></div>
<div aria-label="status" class="status status-md"></div>
<div aria-label="status" class="status status-lg"></div>
<div aria-label="status" class="status status-xl"></div>Pre-configured color status designs.
<div aria-label="status" class="status status-primary"></div>
<div aria-label="status" class="status status-secondary"></div>
<div aria-label="status" class="status status-accent"></div>
<div aria-label="info" class="status status-info"></div>
<div aria-label="success" class="status status-success"></div>
<div aria-label="warning" class="status status-warning"></div>
<div aria-label="error" class="status status-error"></div>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.
<div class="flex items-center gap-2">
<div class="status status-info animate-bounce"></div>
<span>Unread messages</span>
</div>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.
<div class="flex items-center gap-2">
<div class="inline-grid *:[grid-area:1/1]">
<div class="status status-error animate-ping"></div>
<div class="status status-error"></div>
</div>
<span>Server is down</span>
</div>Use the animate-pulse utility to make an element pulse, drawing attention to important statuses like alerts or maintenance.
<div class="flex items-center gap-2">
<div class="status status-warning animate-pulse"></div>
<span>Under Maintenance</span>
</div>This example demonstrates how to integrate status with progress for better task visualization.
<div class="progress mb-4 h-3">
<div class="progress-bar progress-primary w-1/4 rounded-e-none"></div>
<div class="progress-bar progress-success w-1/4 rounded-none"></div>
<div class="progress-bar progress-error w-2/4 rounded-s-none"></div>
</div>
<div class="flex items-center gap-4 *:flex *:items-center *:gap-2">
<div>
<div aria-label="status" class="status status-primary"></div>
<span class="text-primary">Initiated</span>
</div>
<div>
<div aria-label="status" class="status status-success"></div>
<span class="text-success">In Progress</span>
</div>
<div>
<div aria-label="status" class="status status-error"></div>
<span class="text-error">Completed</span>
</div>
</div>