OrderStatusBadge

Small uppercase pill for an order's status, coloured by what the status means rather than by its name. A single <span> driven by the shared status utils.

<script setup lang="ts">
import RyderOrderStatusBadge from "@opeolluwa/ryder/components/orders/OrderStatusBadge.vue"
</script>

<template>
  <RyderOrderStatusBadge :status="order.status" />
</template>

Examples

<script setup lang="ts">
import OrderStatusBadge from "../../../src/components/orders/OrderStatusBadge.vue";
import { ORDER_STATUSES } from "../../../src/utils/orderStatus";
import type { OrderStatus } from "../../../src/types/orders";

const labels: Partial<Record<OrderStatus, string>> = {
  pending: "Awaiting payment",
  paid: "Settled",
};
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex flex-wrap items-center gap-2">
      <OrderStatusBadge
        v-for="status in ORDER_STATUSES"
        :key="status"
        :status="status"
      />
      <OrderStatusBadge :status="null" />
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <OrderStatusBadge status="pending" :labels="labels" />
      <OrderStatusBadge status="paid" :labels="labels" />
      <OrderStatusBadge status="fulfilled" :labels="labels" />
    </div>
  </div>
</template>

Props

Prop	Type	Default	Description
status	OrderStatus | null	—	Status to badge; null resolves to pending.
labels	Partial<Record<OrderStatus, string>>	—	Per-status label overrides; statuses omitted keep the canonical label.

Emits

None.

Slots

None.

Notes

• Colours come from orderStatusBadgeClass: pending grey, paid primary, fulfilled green, cancelled red, conflicted amber — money-not-yet and money-in-dispute can never look alike.
• Text comes from orderStatusLabel(status, labels), which resolves null to pending and only replaces the statuses the consumer overrides.
• The component is ~22 lines with no state; labels has no default in defineProps, so pass undefined to keep the canonical wording.
• The same labels map is accepted by OrderList, OrderListItem and OrderPreview, so one override cascades through the whole order UI.