CopyButton | Arbol UI

Language

Appearance

Beside a value

label names what is copied, in the app’s language, starting with the visible word (“Copy”, “Copiar”).

org_01JF8Z3KQ4V7W2N6

import { useLocale } from 'react-aria-components';
import { CopyButton } from '@arbol-ai/ui';

const OrganizationIdExample = () => {
  const { locale } = useLocale();
  // The app passes its own copy, translated by its message system.
  const label = locale.startsWith('es') ? 'Copiar el ID de la organización' : 'Copy the organization ID';
  return (
    <div className="flex max-w-md items-center gap-2">
      <code className="bg-muted rounded-field flex-1 truncate px-3 py-1.5 font-mono text-xs">
        org_01JF8Z3KQ4V7W2N6
      </code>
      <CopyButton label={label} value="org_01JF8Z3KQ4V7W2N6" />
    </div>
  );
};

<OrganizationIdExample />

Other words

Per instance, or for the whole app through UIProvider messages.

import { CopyButton } from '@arbol-ai/ui';

<CopyButton
  copiedLabel="Link copied"
  value="https://example.com/book/clinica-norte"
  variant="secondary"
/>

Source

The examples above are src/components/copy-button/copy-button.examples.tsx, which the library’s tests render too.