MoleculesStatus Badge

Status Badge

@velon-finance/ui · status: stable · molecule · domain

Status indicator that maps Velon transaction / charge / settlement states (pending, confirmed, completed, failed, expired, success, error, warning, info) to consistent icon + tone + label combinations.

Replaces per-app reimplementations across Velon-console, Velon-user and Velon-manager.

Overview

PendingConfirmedCompletedSuccessFailedExpiredWarningInfo

Sizes

SuccessSuccessSuccess

Custom labels (i18n)

Aguardando PIXPagoRecusado

Without icon

OKHold

Code

import { StatusBadge } from '@velon-finance/ui'
 
<StatusBadge status="completed" label="Pago" />
<StatusBadge status="failed" size="sm" />

Status taxonomy

StatusToneIconUse
pendingwarningClockAguardando ação (PIX a confirmar, KYC em revisão)
confirmedinfoCheckCircleConfirmado mas ainda não liquidado
completed / successsuccessCheckCircleOperação finalizada com sucesso
failed / errordangerXCircleFalha permanente
expiredwarningAlertTriangleTTL excedido (PIX expirado, allocation expirada)
warningwarningAlertTriangleAtenção mas não erro
infoinfoInfoDestaque informativo