Copy Confirmation Component

Feedback button + sonner shadcn/ui button + sonner

component

Overview

Confirm copied content with a tiny state change or lightweight toast. This entry is written as a registry-ready component spec: useful to humans, copyable by AI tools, and easy to map to a future shadcn registry item.

structure

Anatomy

Root
Title
Description
Action
Close

visual API

Variants

default
muted
success
warning
destructive

behavior

States

default
hover
focus-visible
active
disabled
loading

copy-ready details

Component spec

tokens

Styling tokens

radius8px or less

border1px solid rgba(237, 237, 236, 0.14)

backgroundneutral surface with subtle contrast

foregroundhigh-contrast text

mutedForegroundsecondary text at 68-74% contrast

focusRing2px neutral ring with offset

shadowsoft elevation only when interaction needs tactility

motionDuration120ms-220ms

a11y

Accessibility notes

Use semantic HTML or the matching Radix primitive before custom roles.
Keep focus-visible states obvious without adding decorative glow.
Ensure icon-only controls have an accessible label.
Do not rely on color alone for state or validation.

shadcn/ui button + sonner

shadcn implementation

Use Sonner through the matching shadcn component when possible.

Use shadcn tokens for background, border, ring, muted text, radius, and state variants. Keep component-specific classes local and copyable.

optional adapter

HeroUI mapping

Copy Confirmation can map to a HeroUI component only as an optional adapter. Keep UnBoring copy and token language framework-neutral.

AI Prompt

Create a Copy Confirmation component for an AI-generated interface using shadcn-style composition. Use shadcn/ui button + sonner as the implementation base. The component should support default, muted, success, warning, destructive variants and default, hover, focus-visible, active, disabled, loading states. Include clear anatomy for Root, Title, Description, Action, Close. Keep the visual language black, white, and gray with subtle borders, practical spacing, accessible focus states, and no decorative noise.

Negative Prompt

Do not invent a custom component API when shadcn/ui button + sonner already covers the base behavior. Avoid random gradients, oversized radii, unclear disabled states, missing labels, icon-only controls without accessible names, and variants that change layout unexpectedly.

Implementation Notes

Base: shadcn/ui button + sonner
Primitive: Sonner
Tailwind: Use shadcn tokens for background, border, ring, muted text, radius, and state variants. Keep component-specific classes local and copyable.
Dependency: Use Sonner through the matching shadcn component when possible.

Tokens

{
  "id": "copy-confirmation",
  "category": "components",
  "trigger": "user interaction",
  "target": "copy confirmation",
  "feeling": [
    "polished",
    "practical",
    "precise"
  ],
  "palette": [
    "black",
    "white",
    "gray"
  ],
  "radius": "8px or less",
  "border": "1px solid rgba(237, 237, 236, 0.14)",
  "background": "neutral surface with subtle contrast",
  "foreground": "high-contrast text",
  "mutedForeground": "secondary text at 68-74% contrast",
  "focusRing": "2px neutral ring with offset",
  "shadow": "soft elevation only when interaction needs tactility",
  "motionDuration": "120ms-220ms"
}

Usage notes

Short guidance for humans and AI tools before copying the component.

What is this component for?

Copy Confirmation helps teams confirm copied content with a tiny state change or lightweight toast. It should feel like a reusable product primitive, not a one-off decoration.

How should I implement it?

Start from shadcn/ui button + sonner. Use Sonner through the matching shadcn component when possible. Keep variants token-driven and keep states predictable.

What should I avoid?

Do not invent a custom component API when shadcn/ui button + sonner already covers the base behavior. Avoid random gradients, oversized radii, unclear disabled states, missing labels, icon-only controls without accessible names, and variants that change layout unexpectedly.

Copy Confirmation