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

Name	Description	Accepted Values	Type	Default
status	Defines the status of the state.	'success', 'information', 'pending', 'caution', 'danger'	string	success
size	Defines the size of the state. Options range from extra small to extra large, offering flexibility for different UI layouts	'2xl', 'xl', 'lg', 'base', 'sm', 'xs', '2xs'	string	base