Status indicator ​

Status indicator is a component that shows the status of a given entity. It can be used to show the status of a services, shipment, a user, etc.

Usage ​

<script lang="ts" setup>
import { StatusIndicator } from '@returnless/focus-ui';
</script>

<template>
  <StatusIndicator>In Transit</StatusIndicator>
  <StatusIndicator color="red">Request rejected</StatusIndicator>
  <StatusIndicator color="blue">Announced</StatusIndicator>
  <StatusIndicator color="green">Return approved</StatusIndicator>
</template>

Best practices ​

Status indicators benefit users by:

• Using established color patterns so that users can quickly identify their tone or importance level.
• Being clearly labeled with short, scannable text.
• Being positioned to clearly identify the object they're informing or labelling.

Content guidelines ​

Status indicator labels should:

• Use a single word to describe the tone of an object.
• Only use two words if you need to describe a complex state. For example "Partially refunded" and "Partially paid".
• Always describe the tone in the past tense. For example, refunded not refund.