Directory
- Welcome
Status Badge Component
Communicate status information effectively with visually distinct badges. The Status Badge component helps users quickly identify the state of tasks, processes, or items through intuitive colors and clear labels.
Quick Start
<Status status="in-progress" />Customization
Working on it
<Status status="in-progress" label="Working on it" />Available Status Types
Choose from four pre-defined status types to match your content needs:
Customization Options
Tailor the Status Badge to your specific needs:
Finished
Updates Via JavaScript
The status can be updated via JavaScript to change the status of the badge using the data-status attribute.
const statusBadge = document.querySelector<StatusElement>('#status-badge-example');statusBadge.dataset.status = 'in-progress';Status Badge Component Props API
| Prop | Type | Default | Description |
|---|---|---|---|
| status | completed | in-progress | pending | failed | pending | Status type to display |
| label | string | Custom label text (defaults to capitalized status if not provided) |
Why Use Status Badges?
-
Visual Clarity: Instantly communicate status with intuitive color coding
-
Consistent Feedback: Provide uniform status indicators throughout your interface
-
Flexible Implementation: Works in dashboards, tables, cards, and more
-
Customizable Content: Add additional information beneath the status indicator
-
Accessibility Focused: Designed with clear visual and semantic indicators
Limited Time Launch Sale
Enhance your user interface with clear, consistent status indicators. Get our AstroJS starter template now and have your site ready for production in no time.
GET 60% OFF!
