Address
Addresses, txids, and hashes always render mono in a bordered chip. Middle truncation keeps the checkable prefix and suffix; the copy button flips to a success check with a Copied badge; the QR is a genuine byte matrix drawn in the foreground token.
Truncation
Middle truncation shows the first and last eight characters — the parts humans actually compare. Full renders break-all for confirmation screens where the whole string must be verifiable.
<AddressDisplay address="bc1px7zvw9mu…" truncate="middle" />--ch-surface--ch-border--ch-font-family-mono
62-char taproot address to 8…8. The title attribute carries the full string.
<AddressDisplay address="4eEeZq5t3BNQ…" truncate="middle" />--ch-surface--ch-border--ch-font-family-mono
95-char primary address truncates to the same 8…8 silhouette.
<AddressDisplay address="bc1p9x7unej7…" truncate="none" />--ch-surface--ch-border--ch-fg
Send-confirmation contexts only — the full string wraps with break-all.
<AddressDisplay address="4eEeZq5t3BNQ…" truncate="none" />--ch-surface--ch-border--ch-fg
The worst case: 95 characters still stay inside the chip.
Copy state
The live button copies to the clipboard and holds the state for two seconds; the copied prop forces it for review. Icon swaps through the popLayout roll, and the Copied badge slides in beside it.
<AddressDisplay address={address} />--ch-fg-muted--ch-surface-raised--ch-focus
Muted copy glyph — click it: the live state works in this specimen.
<AddressDisplay address={address} copied />--ch-success--ch-success-muted
Success check plus the Copied badge, pinned via the copied prop.
QR pairing
Receive screens pair the chip with a real QR — QRCode.create at error correction M, rendered as a single SVG path in the foreground token on the surface. No image assets, crisp at any scale.
<AddressDisplay address={address} qr />--ch-fg--ch-surface--ch-border
Fresh rotating receive address at the default 128px edge.
<AddressDisplay address={address} qr qrSize={96} />--ch-fg--ch-surface--ch-border
Denser payload, smaller 96px edge for inline contexts.
Across themes
The copied state with its QR under all three layers — the matrix redraws in each theme’s foreground, so it scans everywhere.
<AddressDisplay address={address} copied qr qrSize={96} />--ch-fg--ch-surface--ch-success--ch-border