<Badge> is a small status pill — used everywhere to show order statuses, account states, and categorical labels.

`<Badge>`

<Badge> renders a colored pill with a status dot and a label. It's the canonical way to display:

Order statuses (created, dispatched, completed, canceled)
Account states (active, inactive, pending)
Generic flags (paid, overdue, published)

The status string drives the color via a Tailwind class — a class named <status>-status-badge is applied, so created-status-badge, completed-status-badge, etc. The styles are defined in the ember-ui stylesheet.

Basic Usage

<Badge @status={{this.order.status}} />

The status string is humanized for display (pickup_ready → Pickup Ready) and dasherized for the CSS class (pickup_ready → pickup-ready-status-badge).

Custom Color via `@type`

If your status doesn't have a styled color, pass @type for the visual color and @status (or @text) for the label:

<Badge @type='info' @text='Beta' />
<Badge @type='success' @text='Active' />
<Badge @type='warning' @text='Pending review' />
<Badge @type='danger' @text='Suspended' />

The default color is info if neither @type nor @status is set.

Without the Status Dot

<Badge @status='published' @hideStatusDot={{true}} />

Custom Icon

Replace the default circle dot with any FontAwesome icon:

<Badge @status='vip' @icon='star' @iconPrefix='fas' />
<Badge @text='Refunded' @icon='undo' @type='warning' />

Disable Humanization

By default the badge text is humanized — pickup_ready becomes Pickup Ready. To show the raw status string:

<Badge @status='ABC-123' @disableHumanize={{true}} />

Yielding Custom Content

Yield a block to take full control of the body. The yielded value is @status:

<Badge @status={{this.order.status}} as |status|>
  <span class='font-bold'>{{status}}</span>
  <span class='ml-1'>({{@order.public_id}})</span>
</Badge>

Rounded Full

For a more pill-like shape:

<Badge @status='completed' @roundedFull={{true}} />

Arguments

Argument	Type	Default	Description
`@status`	string	—	The status — drives both color (via class `<status>-status-badge`) and label
`@type`	string	falls back to `@status`, then `info`	Override for the color class
`@text`	string	—	Override for the label (otherwise `@status` is used)
`@disableHumanize`	boolean	`false`	Show the raw status string instead of humanizing it
`@hideText`	boolean	`false`	Render only the dot/icon
`@hideStatusDot`	boolean	`false`	Hide the status dot
`@hideIcon`	boolean	`false`	Same as `@hideStatusDot`
`@icon`	string	`circle`	FontAwesome icon for the dot
`@iconPrefix`	string	`fas`	FontAwesome prefix
`@iconClass`	string	—	Extra classes on the icon
`@size`	string	`xs`	Icon size — `xs`, `sm`, `lg`, etc.
`@roundedFull`	boolean	`false`	Render as a fully rounded pill instead of a small rounded rectangle
`@helpText`	string	—	Tooltip on hover
`@exampleText`	string	—	Optional example beneath the help text
`@tooltipPlacement`	string	`top`	Tooltip placement
`@wrapperClass`	string	—	Extra classes on the outer `<div>`
`@spanClass`	string	—	Extra classes on the inner `<span>`

Any additional ...attributes are forwarded to the outer <div>.

Real-World Examples

{{! Order status in a list row }}
<Badge @status={{order.status}} />

{{! Inside a table cell }}
<Badge @status={{row.account.status}} @hideStatusDot={{true}} />

{{! Indicator of unread messages }}
{{#if this.unreadCount}}
  <Badge
    @text={{this.unreadCount}}
    @type='danger'
    @hideStatusDot={{true}}
    @roundedFull={{true}}
  />
{{/if}}

{{! With tooltip explaining the state }}
<Badge
  @status='pickup_ready'
  @helpText='Order has been prepared and is awaiting customer pickup'
/>

Source

File	Description
`addon/components/badge.hbs`	Template (template-only — no JS class)

Badge