Pricing

CopyLink

Figma Source code

Show a link that opens from its text and copies its address from the rest of the control.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use CopyLink for share addresses, invitation links, and AI documentation entries. It belongs to the link family with Link.

  • Use Link for ordinary text navigation, CopyLink when the address should be copied, and Input when it should be edited.

  • href is the complete address used for display, navigation, and copying. Long addresses are truncated only on screen, never in the copied value.

  • Hover underlines the text; navigation opens a new tab by default. Clicking whitespace or the icon on the right copies the URL; CopyButton owns success feedback.

Import

import { CopyLink } from '@snowui-design-system/components';

Usage

Link appearance

Disabled

API Reference

Property Type Default Example Description
href string required href="/components" Address for display, navigation, and copying. Pass a full URL when an absolute address must be copied.
target string "_blank" target="Example" Link navigation target.
rel string "noopener noreferrer" rel="Example" Link relationship attribute.
disabled boolean false disabled Disable both navigation and copying.
parts ComponentPartsOf<{ Link: typeof Link; CopyButton: typeof CopyButton }> — parts={partsOptions} Configure public Props of generated children, such as Link.color or underline and CopyButton.ariaLabel, writeText, or feedbackDuration. The parent owns the address, disabled state, and layout.
onCopy (text: string) => void — onCopy={(value) => { /* handle value */ }} Receives the complete address after a successful copy.
onCopyError (error: unknown) => void — onCopyError={(value) => { /* handle value */ }} Callback when copying fails.