data-display/DSStatusLabel

DSStatusLabel

data-display
since 1.2.0

Status label with icon indicating success, warning, error, info, or neutral state.

iOSmacOS

Purpose

Use to display status information with appropriate color and icon. Provides instant visual feedback.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Variants

status-label-success screenshot

.success

Green with checkmark icon

status-label-warning screenshot

.warning

Yellow with warning icon

status-label-error screenshot

.error

Red with error icon

status-label-info screenshot

.info

Blue with info icon

status-label-neutral screenshot

.neutral

Gray with circle icon

Props

PropTypeDefaultDescription
textreqString—Status text
stylereqDSStatusStyle—Status style: .success, .warning, .error, .info, .neutral
showIconBooltrueShow status icon

Examples

Order status

Show order status with appropriate style.

swift
switch order.status {
case .delivered:
    DSStatusLabel(text: "Delivered", style: .success)
case .pending:
    DSStatusLabel(text: "Pending", style: .warning)
case .cancelled:
    DSStatusLabel(text: "Cancelled", style: .error)
}

System health

Display system or service status.

swift
HStack(spacing: DSSpacing.sm) {
    Text("API Status:")
        .font(.system(size: 14))
    DSStatusLabel(text: "Operational", style: .success)
}

Composition: List with status

List items with status indicators.

swift
ForEach(tasks) { task in
    DSCard {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                Text(task.title)
                    .font(.system(size: 16, weight: .semibold))
                Text(task.description)
                    .font(.system(size: 13))
                    .foregroundStyle(DSColor.muted)
            }
            Spacer()
            DSStatusLabel(
                text: task.status.displayName,
                style: task.status.style
            )
        }
    }
}

Usage Guidelines

  • Use semantic colors that match the status meaning
  • Keep text short and clear (1-2 words)
  • Icons provide quick visual scanning

When to Use

✓ Use DSStatusLabel for:

  • • Status indicators with semantic meaning (success, warning, error)
  • • System health or service status displays
  • • Order, task, or process status in lists
  • • Real-time status updates with icons

✗ Avoid using for:

  • • Non-status labels (use DSBadge)
  • • Interactive filters (use DSChip)
  • • Simple text without semantic meaning (use Text)
  • • Count indicators (use DSBadge)

Consider instead:

DSBadge

For non-status labels without semantic icons

DSChip

For interactive, selectable filters

DSNoticeBar

For full-width status banners

Accessibility

VoiceOver

Announces '[text], Status, [style]' (e.g., 'Delivered, Status, Success')

Keyboard

  • • Not interactive - display only

Dynamic Type

✓ Supported

Contrast

WCAG AA compliant (icon and text 4.5:1)

Traits

.isStaticTextIcon meaning conveyed via style nameColor not sole indicator

Related Components

BadgeTagNoticeBar