ExperimentalatomData display

CopyField

An email or phone number that copies when clicked.

import { … } from "@brdgapp/ui/components/copy-field"

Usage

CopyField shows an email or phone number and copies it when clicked, confirming with "Copied". It deliberately doesn't open a mail app or dial: on Bridge, people mostly want to paste the address somewhere. The usual mistake is making contact details mailto: links.

When to use

row: a contact-info list on a profile.
inline: one email in a profile's meta line.

When not to use

For a link people should follow. Use a link.

Anatomy

Icon. Mail or phone.
Value. Cut with an ellipsis if long.
Copy hint. row only: "Copy" appears on hover or keyboard focus, then "Copied" in green.

Examples

Contact rows

Hover or focus to see Copy; click to copy.

Inline

Muted, and the stronger version.

States

	Rest	Hover	Focus
Row
Inline
Inline, strong

State	What happens
Rest	Muted value.
Hover / focus	Darker value; `row` fills lightly and shows Copy.
Copied	A green check and "Copied" for 1.5 seconds.

Behavior

Built on Base UI Button, like Button: a real button with keyboard and focus handled.
Copies with the browser's clipboard. If the browser blocks it, nothing happens and nothing breaks.
"Copied" is announced to screen readers.

Do and don't

Show contact details people may paste elsewhere as CopyField.

Don't

Make them mailto: / tel: links that open another app.

Content

Show the value exactly as stored. Don't shorten email addresses.

Accessibility

The button's name says what it does: "Copy email: leah.okonkwo@example.com".

Keys	Action
`EnterSpace`	Copy.

API reference

CopyField

The copyable value.

Prop	Type	Default	Description
`value`	`string`	—	The email or phone number.
`kind`	`"email" \| "phone"`	—	Picks the icon and the label.
`variant`	`"row" \| "inline"`	`"row"`	Full-width row or compact meta item.
`strong`	`boolean`	`false`	Inline only: body color instead of muted.
`size`	`12 \| 14`	`12`	Inline only: text size.
`showIcon`	`boolean`	`true`	Inline only: show the icon.
`className`	`string`	—	Layout only.
`…other attributes`	`id, aria-, data-, event handlers`	—	Passed to the button. The component's own props win where they overlap.

Lineage

What it's built from and where it's used, read from the code. When you change it, check these too.

Built from: Nothing else in the package
Used by components: None
Used in patterns: Feedback and undo Labels and icons that change
Used in templates: None

Known gaps

Where the code still differs from the system. Follow the system, not the gap.

Bridge OS hard-codes the "Copied" green as #0EA02E; the package uses the success tokens.

Sources

Bridge OS components.md → CopyField; src/components/ui/copy-field.tsx.