InfoRow

Label-value pair row for displaying structured information like transaction details.

Open in Storybook

Interactive Demo

Transaction ID

TXN-123456

Status

Completed

Amount

500,000.00

Currency

n

Date

June 18, 2026

Usage

<script setup>
import { InfoRow } from '@yellowcard/b2b-design-system';
</script>

<template>
  <InfoRow title="Transaction ID" text="TXN-123456" :canCopy="true" />
  <InfoRow title="Status" text="Completed" />
  <InfoRow title="Amount" text="500,000.00" />
</template>

API Reference

Props

Prop	Type	Default	Description
title*	string	—	Row label
variant	'text' | 'currency' | 'badge' | 'expiry'	'text'	Display variant
text	string	—	Value text
currency	string	—	Currency code (for currency variant)
subtitle	string	—	Subtitle text below value
noWrap	boolean	false	Prevent text wrapping
canCopy	boolean	false	Show copy-to-clipboard button
expiresIn	number	0	Expiry countdown in seconds