id: copy_button
label: Copy Button
family: family-f-data
category: Action
intent: Copy text to clipboard on click
description: Clipboard copy button
composable: false
capabilities:
required_parts: []
optional_parts: []
tags: ["copy-button", "copy", "clipboard", "button", "action"]
keywords:
pain: Copy buttons require manual state handling and feedback UI
promise: Copy state lifecycle fully encoded in DOM state machine
why: |
CopyButton encodes idle, copied, and error states via data-rs-state. Behavior layer handles transitions without JS wiring. This guarantees consistent feedback and eliminates manual state management.
rules: ["CR-001", "CR-004"]
use_cases: ["code snippets", "share links"]
related: ["button", "button_group", "icon_button", "link"]
file: copy_button_ui.css
tokens: copy-button-*, space-*, radius-*, motion-*, font-*, state-*
foundation: spacing, radius, motion, typography, interaction
states: ["hover", "copied", "error"]
island: copy_button_boundary.rs
pillar: action
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift", "Island Architecture"]
before: |
// ❌ Typical
view! {
<button on:click=copy>"Copy"</button>
}
after: |
// ✅ CanonRS
view! {
<CopyButton id="copy" text="value" />
}
boundary_type: interaction
ix_group: ix_content
block: []
blocks_primitives: [stack]