Tally UI

OrderStatusBadge

Colour-coded badge that indicates the current status of an order

Import

import { OrderStatusBadge } from '@tallyui/components';

Usage

<OrderStatusBadge status="completed" />

Renders a small pill with a coloured dot and label. Each status maps to a distinct colour so cashiers can scan order states at a glance.

Props

PropTypeDefaultDescription
statusOrderStatusrequiredOne of 'pending', 'processing', 'completed', 'refunded', or 'cancelled'
classNamestringOverride container styles

OrderStatus

type OrderStatus = 'pending' | 'processing' | 'completed' | 'refunded' | 'cancelled';

Live demo

On this page