ArcaneJaspr Codex
Documentation
🔍
ArcaneStatusBadge
Status indicator badges with pulse animation
Live Demo
All Systems Operational
Degraded Performance
Service Down
Maintenance Scheduled
Offline
Small
Medium
Large

ArcaneStatusBadge#

A status indicator badge with pulse animation for showing system status, service health, or state indicators.

Basic Usage#

ArcaneStatusBadge.success('All Systems Operational')

Properties#

PropertyTypeDefaultDescription
statusStatusTyperequiredStatus type
labelStringrequiredBadge label
size StatusBadgeSize md Badge size
showGlow bool true Show glow effect
showPulse bool true Show pulse animation
indicatorColor String? null Custom indicator color
background String? null Custom background
borderColor String? null Custom border color

Status Types#

// Success - green, operational
ArcaneStatusBadge.success('Online')

// Warning - yellow, degraded
ArcaneStatusBadge.warning('Degraded Performance')

// Error - red, down
ArcaneStatusBadge.error('Service Down')

// Info - blue, informational
ArcaneStatusBadge.info('Maintenance Scheduled')

// Offline - gray, disabled
ArcaneStatusBadge.offline('Offline')

Sizes#

// Small
ArcaneStatusBadge.success('Small', size: StatusBadgeSize.sm)

// Medium (default)
ArcaneStatusBadge.success('Medium', size: StatusBadgeSize.md)

// Large
ArcaneStatusBadge.success('Large', size: StatusBadgeSize.lg)

Examples#

System Status Page#

ArcaneColumn(
  gapSize: Gap.md,
  children: [
    ArcaneRow(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        ArcaneText('API'),
        ArcaneStatusBadge.success('Operational'),
      ],
    ),
    ArcaneRow(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        ArcaneText('Database'),
        ArcaneStatusBadge.success('Operational'),
      ],
    ),
    ArcaneRow(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        ArcaneText('CDN'),
        ArcaneStatusBadge.warning('Degraded'),
      ],
    ),
  ],
)

ArcaneFooterBrandColumn(
  logo: MyLogo(),
  description: 'Premium game server hosting.',
  bottomContent: ArcaneStatusBadge.success('All Systems Operational'),
)

Dashboard Header#

ArcaneRow(
  gapSize: Gap.md,
  children: [
    ArcaneText('Server Status'),
    ArcaneStatusBadge.success('Online', size: StatusBadgeSize.sm),
  ],
)

Without Animation#

ArcaneStatusBadge(
  status: StatusType.success,
  label: 'Active',
  showPulse: false,
  showGlow: false,
)