Pricing

CopyLink handbook

v1.0.2 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Display a link address that users can open or copy: clicking its text opens the link, while clicking the rest of the surface copies the address.

When to use it

Use for share URLs, invitation links, and AI documentation entry points. CopyLink belongs to the link family alongside Link.

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

  • href is the complete address used for display, navigation, and copying. Long addresses are truncated only visually; copying retains the full value.

  • Hovering text shows an underline; navigation opens a new tab by default. Clicking blank space or the trailing icon copies; CopyButton manages success feedback.

Quick start

<script lang="ts">  import { CopyLink } from '@snowui-design-system/components';</script> <CopyLink href="https://snowui.dev/llms.txt" />

API

Keyword Type Default Description
href string Required Address to display, navigate to, and copy. Pass a full URL when an absolute address must be copied.
target string "_blank" Link opening target.
rel string "noopener noreferrer" Link relation attribute.
disabled boolean false Disables both navigation and copying.
parts ComponentPartsOf<{ Link: typeof Link; CopyButton: typeof CopyButton }> — Configure public child Props such as Link.color / underline and CopyButton.ariaLabel / writeText / feedbackDuration. The parent owns the address, disabled state, and layout.
onCopy (text: string) => void — Receives the complete address after a successful copy.
onCopyError (error: unknown) => void — Callback when copying fails.

Other compatible Props are inherited from Frame; class / style apply to the surface.

Usage boundaries and details

  • The default surface has no border or form hover transition and uses surface-2. Link defaults to Black100; its hover color stays the same and an underline appears.

  • Link and CopyButton are sibling interactive elements. The text region navigates; the rest of the surface copies. Each gets a Tab stop; Enter opens, while Enter / Space copies.

  • Reserve size-4 for the copy icon, with the built-in 12 CSS px floor, plus gap-2 with a 4 CSS px floor. At a 16px root font size the defaults remain a 16px icon and 8px gap. Long addresses use an ellipsis while navigation and copying retain the complete address.

  • The copy button is bare and muted, with its icon centered on the right. CopyButton prevents repeated clicks during feedback.

  • Does not participate in form submission or provide editing, validation, or an input role. No additional component package is needed.

  • --snowui-copy-link-padding-x-override / --snowui-copy-link-padding-y-override / --snowui-copy-link-radius-override replace the default padding-4 / padding-3 / radius-4 respectively.

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

This component source does not directly consume a registered component-specific override. Style composed children through public parts or an explicit child; do not guess variable names.

Design guide · Tokens · Composition boundaries

Required Prop: href.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inheritance: Omit<FrameProps, "children">. Consult the base class public documentation; fields excluded by Omit cannot be passed through unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.

ComponentPartsOf

Source: components/src/logic/component-parts.svelte.ts

export type ComponentPartsOf<    T extends Record<string, Component<any>>,> = {    [K in keyof T]?: ConfigurableComponentPartProps<T[K]>;};

ConfigurableComponentPartProps

Source: components/src/logic/component-parts.svelte.ts

export type ConfigurableComponentPartProps<C extends Component<any>> = Partial<    Omit<ComponentProps<C>, ComponentPartControlledKey>>;

ComponentPartControlledKey

Source: components/src/logic/component-parts.svelte.ts

export type ComponentPartControlledKey =    | "children"    | "as"    | "value"    | "defaultValue"    | "open"    | "selected"    | "checked"    | "disabled"    | "readonly"    | "id"    | `on${string}`    | `aria-${string}`;