CopyField

A value to hand on — the venue's chat link — in a read-only field with a copy button beside it, set like any Input. Copying turns the icon into a tick and announces it; where the clipboard is blocked, the value is selected instead. Composed from Input and Button.

Playground

import { CopyField } from "@/components/shared/copy-field";

<CopyField
  value="https://withokami.com/c/barber-kamzik"
  display="withokami.com/c/barber-kamzik"
  label="Chat link"
  copyLabel="Copy chat link"
  copiedLabel="Link copied"
/>

CopyField

Value

Display

Size

Labels

Label

Copy

Copied

In a field

With a visible label, pass id and point the FieldLabel's htmlFor at it instead of passing label. A description can say where the value goes. For a link, display shows it without its https://, so the studio's own part fits on a phone; the button still copies the whole value.

import { Link01Icon } from "@hugeicons/core-free-icons";
import { CopyButton } from "@/components/shared/copy-button";
import { CopyField } from "@/components/shared/copy-field";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/shared/field";

<Field>
  <FieldLabel htmlFor="st-chat">Chat link</FieldLabel>
  <CopyField
    id="st-chat"
    value="https://withokami.com/c/barber-kamzik"
    display="withokami.com/c/barber-kamzik"
    copyLabel="Copy chat link"
    aria-describedby="st-chat-hint"
  />
  <FieldDescription id="st-chat-hint">
    Put it in your Instagram bio and Google profile — clients book here.
  </FieldDescription>
</Field>

Sizes

One size sets the field and the button together: sm 32px, md 36px by default, lg 40px.

import { Link01Icon } from "@hugeicons/core-free-icons";
import { CopyButton } from "@/components/shared/copy-button";
import { CopyField } from "@/components/shared/copy-field";

<CopyField size="sm" value="https://withokami.com/c/studio-lumen" label="Chat link" />
<CopyField value="https://withokami.com/c/studio-lumen" label="Chat link" />
<CopyField size="lg" value="https://withokami.com/c/studio-lumen" label="Chat link" />

In the venue's language

The button's name and the “copied” announcement are props, so they come from the same translations as the rest of the screen.

import { Link01Icon } from "@hugeicons/core-free-icons";
import { CopyButton } from "@/components/shared/copy-button";
import { CopyField } from "@/components/shared/copy-field";

<CopyField
  value="https://withokami.com/c/salon-jazmin"
  label={t("chatLink")}         // "Odkaz na chat"
  copyLabel={t("copyChatLink")}  // "Kopírovať odkaz"
  copiedLabel={t("copied")}      // "Skopírované"
/>

CopyButton: the button alone

The field's button on its own, where the value needn't show: the booking link beside the studio's name in Studio. Its icon can say what it copies (a link), and it can be a ghost.

import { CopyButton } from "@/components/shared/copy-button";

<CopyButton
  value={bookingLink}
  label={t("copyLink")}
  copiedLabel={t("linkCopied")}
  icon={Link01Icon}
  variant="ghost"
  size="sm"
/>

API reference

Prop	Type	Default	Description
value	string	—	The text to show and copy — a link, a code.
display	string	value	What the field shows instead — a link without https://. The button still copies value.
label	string	—	The field's name for assistive tech, when no FieldLabel points at id.
id	string	—	Lands on the input, for a FieldLabel's htmlFor.
copyLabel	string	"Copy"	The copy button's accessible name. Say what it copies: “Copy chat link”.
copiedLabel	string	"Copied"	Announced politely once the value is on the clipboard.
aria-describedby	string	—	Links the input to a FieldDescription.
size	"sm" \| "md" \| "lg"	"md"	Field and button together: 32, 36 or 40px.
className	string	—	Layout only, on the row that holds field and button.

Guidelines

For values people pass on, not edit: the chat link, a referral code. If they might change it, it's an Input.
Name the button for what it copies (“Copy chat link”), and pass both labels from translations — the defaults are English.
The tick lasts a moment and the change is announced; don't add a toast on top.
Give it the column's full width. A link cut off halfway is hard to trust before it's pasted.