Status Indicator

Display a status indicator tag.

Usage

A specialised tag used to indicate a variety of states.

Active 
      <template>
  <CStatusIndicator
    tag="Active"
    variant="active"
  />
</template>

Variant

Use the variant prop to adjust the color variant.

Example 
      <template>
  <CStatusIndicator variant="error" tag="Example" />
</template>

Size

Use the size prop to adjust the indicator sizing.

Example 
      <template>
  <CStatusIndicator size="xl" tag="Example" />
</template>

Transitioning

Use the transitioning boolean prop to display a transitioning indicator.

Example 
      <template>
  <CStatusIndicator transitioning tag="Example" />
</template>

Props

Prop Default Type
size'sm' "md" | "sm" | "lg" | "xl" | "2xl"
tag string
variant'inactive' "default" | "error" | "active" | "inactive" | "success" | "warning"
transitioningboolean