Status

The Status component provides a standardized way to display status indicators across the application. It ensures consistent color, iconography, and accessibility for different states such as Success, Information, Pending, Caution, and Danger.

Basic Usage

<template>
  <spr-status state="success" />
  <spr-status state="information" />
  <spr-status state="pending" />
  <spr-status state="caution" />
  <spr-status state="danger" />
</template>

Sizes

status component has 7 different sizes. You can use the size prop to set the size of the status. The default size is base. The available sizes are 2xl, xl, lg, base, sm, xs, 2xs.

API Reference

Props

Name	Description	Type	Default
state	Defines the status state to display. Each state has a specific color and icon: success: Green check circle for successful operations information: Blue info icon for informational messages pending: Yellow warning icon for pending states caution: Orange warning icon for caution states danger: Red warning circle for error or danger states	'success' | 'information' | 'pending' | 'caution' | 'danger'	'success'
size	Defines the size of the status indicator. Provides flexibility for different UI layouts and emphasis levels: 2xs: 14px × 14px xs: 16px × 16px sm: 20px × 20px base: 24px × 24px lg: 32px × 32px xl: 40px × 40px 2xl: 48px × 48px	'2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl'	'base'

Icons

State	Icon
Success	ph:check-circle-fill
Information	ph:info-fill
Pending	ph:warning-fill
Caution	ph:warning-fill
Danger	ph:warning-circle-fill