Components

BadgeTypePill

Stable

Read-only direction indicator used in the transaction table's Type column. Visually distinct from Badge — uses rounded-full (capsule shape) instead of rounded-lg.

Not a Badge. Do not use for status labels — use Badge variant="success|warning|destructive" for Completed / Pending / Failed.

Variants

ReceiveSend

Usage

import { BadgeTypePill } from "@mnee-ui/ui"// In the transaction table Type column<BadgeTypePill variant={tx.direction === "IN" ? "receive" : "send"}>  {tx.direction === "IN" ? "Receive" : "Send"}</BadgeTypePill>

Props

Prop	Type	Default	Description
variant	"receive" \| "send"	required	Visual style
children	React.ReactNode	—	Label text
className	string	—	Layout overrides

Design notes

Variant	Background	Text	Border
receive	bg-brand (#D97706)	text-white	none
send	transparent	#0a0a0a	surface-border (#E5E5E5)