Skip to main content

​
Overview

The TagStatus component displays compact, color-coded status badges. It supports 13 different color schemes and an optional dot variant for minimal status indicators.

​
Basic Usage

<script>
  import { TagStatus } from '@invopop/popui'
</script>

<TagStatus
  label="Paid"
  status="green"
/>

​
Status Colors

​
Green (Paid/Success)

<TagStatus label="Paid" status="green" />
<TagStatus label="Approved" status="green" />
<TagStatus label="Active" status="green" />

​
Yellow (Processing/Warning)

<TagStatus label="Processing" status="yellow" />
<TagStatus label="Pending" status="yellow" />
<TagStatus label="Review" status="yellow" />

​
Red (Error/Failed)

<TagStatus label="Failed" status="red" />
<TagStatus label="Rejected" status="red" />
<TagStatus label="Error" status="red" />

​
Orange (Draft)

<TagStatus label="Draft" status="orange" />
<TagStatus label="Incomplete" status="orange" />

​
Blue (Sent/Info)

<TagStatus label="Sent" status="blue" />
<TagStatus label="Delivered" status="blue" />

​
Purple (Registered)

<TagStatus label="Registered" status="purple" />
<TagStatus label="Verified" status="purple" />

​
Teal (Completed)

<TagStatus label="Completed" status="teal" />
<TagStatus label="Finished" status="teal" />

​
Steel Blue (Received)

<TagStatus label="Received" status="steelBlue" />
<TagStatus label="Acknowledged" status="steelBlue" />

​
Crimson (Rejected)

<TagStatus label="Rejected" status="crimson" />
<TagStatus label="Declined" status="crimson" />

​
Grey (Void/Neutral)

<TagStatus label="Void" status="grey" />
<TagStatus label="Cancelled" status="grey" />
<TagStatus label="Archived" status="grey" />

​
Additional Colors

<TagStatus label="Olive Status" status="olive" />
<TagStatus label="Blue Violet" status="blueViolet" />
<TagStatus label="Empty State" status="empty" />

​
Dot Variant

Use the dot prop for a minimal status indicator: 
<TagStatus label="Online" status="green" dot />
<TagStatus label="Away" status="yellow" dot />
<TagStatus label="Offline" status="grey" dot />

​
Dot Only (No Label)

Create a small status dot without text: 
<TagStatus status="green" dot />
<TagStatus status="red" dot />
<TagStatus status="grey" dot />

​
In Data Tables

Commonly used in table cells for status columns: 
<script>
  import { TagStatus } from '@invopop/popui'
  
  let invoices = [
    { id: 1, number: 'INV-001', status: 'green', statusLabel: 'Paid' },
    { id: 2, number: 'INV-002', status: 'yellow', statusLabel: 'Processing' },
    { id: 3, number: 'INV-003', status: 'red', statusLabel: 'Failed' }
  ]
</script>

<table>
  <thead>
    <tr>
      <th>Invoice</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {#each invoices as invoice}
      <tr>
        <td>{invoice.number}</td>
        <td>
          <TagStatus
            label={invoice.statusLabel}
            status={invoice.status}
          />
        </td>
      </tr>
    {/each}
  </tbody>
</table>

​
Multiple Status Indicators

<script>
  import { TagStatus } from '@invopop/popui'
</script>

<div class="flex gap-2 items-center">
  <span class="text-sm">Payment:</span>
  <TagStatus label="Paid" status="green" />
  <TagStatus label="Verified" status="purple" dot />
</div>

​
Props

​
label
string
default:"''"
The text displayed in the tag. Can be omitted for dot-only indicators.
​
status
StatusType
default:"'grey'"
The color scheme of the tag.Possible values:
  • 'green' - Green (paid, success, active)
  • 'yellow' - Yellow (processing, pending, warning)
  • 'red' - Red (error, failed, rejected)
  • 'orange' - Orange (draft, incomplete)
  • 'blue' - Blue (sent, delivered, info)
  • 'purple' - Purple (registered, verified)
  • 'teal' - Teal (completed, finished)
  • 'steelBlue' - Steel blue (received, acknowledged)
  • 'crimson' - Crimson (rejected, declined)
  • 'olive' - Olive green
  • 'blueViolet' - Blue violet
  • 'grey' - Grey (void, cancelled, neutral)
  • 'empty' - Light grey with shadow
​
dot
boolean
default:"false"
When true, displays a colored dot before the label. Creates a more subtle status indicator.If label is empty and dot is true, displays only a small colored dot.

​
Styling Details

​
Default Tag Styling

  • Typography: text-sm, font-medium, leading-4
  • Shape: Rounded corners with rounded class
  • Spacing: py-0.5 vertical padding, px-1 horizontal padding
  • Layout: Inline flex with centered items and 0.25rem gap

​
Dot Variant Styling

When dot={true}:
  • Horizontal padding increases to px-1.5
  • Dot size: 8px (size-2)
  • Dot shape: Rounded with rounded-[2px]
  • Label wraps with whitespace-nowrap

​
Dot Only (No Label)

When dot={true} and no label:
  • Zero padding (p-0!)
  • Only the colored dot is visible
  • Minimal footprint for space-constrained layouts

​
Color Mappings

Each status has specific background, text, and dot colors defined in the Tailwind theme:
StatusBackgroundTextDot
greenbg-background-status-paidtext-foreground-status-paidbg-icon-status-paid
yellowbg-background-status-processingtext-foreground-status-processingbg-icon-status-processing
redbg-background-status-errortext-foreground-status-errorbg-icon-status-error
orangebg-background-status-drafttext-foreground-status-draftbg-icon-status-draft
bluebg-background-status-senttext-foreground-status-sentbg-icon-status-sent
purplebg-background-status-registeredtext-foreground-status-registeredbg-icon-status-registered
tealbg-background-status-completedtext-foreground-status-completedbg-icon-status-completed
steelBluebg-background-status-receivedtext-foreground-status-receivedbg-icon-status-received
crimsonbg-background-status-rejectedtext-foreground-status-rejectedbg-icon-status-rejected
greybg-background-status-voidtext-foreground-default-secondarybg-icon-status-void
emptyshadow-avatartext-foreground-default-secondarybg-icon-default-secondary

​
Use Cases

  • Invoice status: Paid, pending, overdue, void
  • Order status: Processing, shipped, delivered, cancelled
  • Document status: Draft, sent, signed, completed
  • User status: Active, inactive, pending, suspended
  • Payment status: Paid, processing, failed, refunded
  • Availability indicators: Online, away, busy, offline (with dot)

​
Accessibility

  • Color is not the only indicator (text labels are provided)
  • Sufficient contrast ratios between background and text
  • Compact size maintains readability
  • Inline display works well with screen readers

​
TypeScript

The component is fully typed with the TagStatusProps interface: 
import type { TagStatusProps, StatusType } from '@invopop/popui'

// StatusType definition
type StatusType =
  | 'grey'
  | 'green'
  | 'yellow'
  | 'red'
  | 'orange'
  | 'blue'
  | 'purple'
  | 'olive'
  | 'teal'
  | 'crimson'
  | 'blueViolet'
  | 'steelBlue'
  | 'empty'

Build docs developers (and LLMs) love

Get started for freeTalk to us