patterns

CopyIdButton

Click-to-copy identifier cell for tables. Truncates long IDs with `…`, swaps to «Copied» for ~1.2s on success, falls back silently when clipboard isn't available.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/copy-id-button.json

Or import from the workspace package:

import { CopyIdButton } from "@8maverik8/design";

Examples

Inside a table cell

<CopyIdButton id="i-0a1b2c3d4e5f6g7h8" />

Guidelines

Use this in a dedicated identifier column (instance ID, ARN, request ID).
Use it for human-readable names.The mono-font + truncation conventions only make sense for opaque IDs.