Forms

CopyField and CopyButton

A read-only value with a copy button, and the button on its own.

import { CopyField, CopyButton, useCopy } from "@flinbu/seed";

Command, secret and a token

Install

npm i @flinbu/seed @flinbu/seed-tokens

API key

sk_live_•••••••••••••••••••••

Anyone with this key can publish to your design system.

--bg-accent-solid

import { CopyButton, CopyField, Field, Inline, Stack } from "@flinbu/seed";

<Stack gap="base" className="w-full max-w-md">
  <Field label="Install"><CopyField value="npm i @flinbu/seed @flinbu/seed-tokens" /></Field>
  <Field label="API key" hint="Anyone with this key can publish to your design system."><CopyField value="sk_live_51Hq8f2kLmN0pQrStUvWx" secret revealPrefix={8} /></Field>
  <Inline><code className="font-mono mono-value-regular text-primary">--bg-accent-solid</code><CopyButton value="var(--bg-accent-solid)" label="Copy CSS variable" /></Inline>
</Stack>

Use it for

Install commands, API keys, token names, URLs.

Props

Prop	Type	Default	Description
`value`	`string`	–	What gets copied.
`CopyField: secret / revealPrefix`	`boolean / number`	–	Masks it with a Show button; keeps the first characters.
`label / copyLabel`	`string`	`'Copy'`	Tooltip and accessible name.
`onCopy`	`(value) => void`	–	After copying.

Accessibility

The button is named (Copy, or your label); Copied is announced and the icon turns into a check for 2 seconds.