FreeComponents

Status Badge

Capsule-shaped colored status badge with preset styles (info, success, warning, error, neutral) for workflow states like orders, tickets, contracts, and tasks

Free
Free with a ShipSwift account.

Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.

Works with

+70

What it does

SWStatusBadge is a compact, capsule-shaped status label designed to pop visually in list rows, headers, and detail screens without dominating the layout. It ships with five semantic preset styles -- info (blue), success (green), warning (orange), error (red), and neutral (gray) -- each mapping a single tint color to the background fill (color × 0.18, slightly higher for success), the foreground text, and a faint matching stroke (color × 0.35). The result is legible in both light and dark mode with zero per-style overrides.

Designed for any workflow-driven application: order pipelines (pending / making / ready / completed), support tickets (open / in-progress / resolved / escalated), contracts (draft / signed / expired), task lists, inventory states, and more. Accepts both LocalizedStringKey (for static, localized labels) and String (for server-driven or runtime-formatted text).

What you get

  • ✓208 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
componentdisplaybadgestatuscapsuleworkflowSwiftUI

Usage

// 1. Preset styles with LocalizedStringKey (recommended for static, localized labels)
SWStatusBadge(text: "Pending", style: .warning)
SWStatusBadge(text: "Making", style: .info)
SWStatusBadge(text: "Ready", style: .success)
SWStatusBadge(text: "Cancelled", style: .error)
SWStatusBadge(text: "Completed", style: .neutral)

// 2. Dynamic String (e.g. server-driven status name)
SWStatusBadge(text: order.statusName, style: .info)

// 3. Drive style from your domain enum
enum OrderStatus {
    case pending, making, ready, completed, cancelled

    var badgeStyle: SWStatusBadgeStyle {
        switch self {
        case .pending:   .warning
        case .making:    .info
        case .ready:     .success
        case .completed: .neutral
        case .cancelled: .error
        }
    }

    var displayName: String {
        switch self {
        case .pending:   "Pending"
        case .making:    "Making"
        case .ready:     "Ready"
        case .completed: "Completed"
        case .cancelled: "Cancelled"
        }
    }
}

SWStatusBadge(text: order.status.displayName, style: order.status.badgeStyle)

// 4. Inside a list row
HStack {
    Text(order.title)
    Spacer()
    SWStatusBadge(text: order.status.displayName, style: order.status.badgeStyle)
}

// 5. Inside a detail header (multiple badges side-by-side)
HStack(spacing: 8) {
    SWStatusBadge(text: "Verified", style: .success)
    SWStatusBadge(text: "Premium", style: .info)
}

More in Components

All 21 skills in Components