# CopyButton

A Button preset that copies text to the clipboard with transient confirmation.

## Default

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-button-copybutton--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { CopyButton } from "@coreai-ds/react-components";

export const Default = () => {
    const styles = /* css */ `
      .copy-button-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalL);
        align-items: flex-start;
        padding: var(--spacingVerticalL);
      }

      .copy-button-example__row {
        display: flex;
        align-items: center;
        column-gap: var(--spacingHorizontalS);
      }

      .copy-button-example__heading {
        margin: 0;
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }

      .copy-button-example__code {
        font-family: var(--fontFamilyMonospace);
        font-size: var(--fontSizeBase300);
        color: var(--colorNeutralForeground1);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="copy-button-example">
          <div className="copy-button-example__row">
            <p className="copy-button-example__heading">icon only</p>
            <CopyButton aria-label="Copy value" contentToCopy="Hello from CoreAI"/>
          </div>

          <div className="copy-button-example__row">
            <code className="copy-button-example__code">npm i @coreai-ds/react-components</code>
            <CopyButton aria-label="Copy install command" contentToCopy="npm i @coreai-ds/react-components"/>
          </div>

          <div className="copy-button-example__row">
            <p className="copy-button-example__heading">with text</p>
            <CopyButton aria-label="Copy value" contentToCopy="Hello from CoreAI">
              Copy
            </CopyButton>
          </div>
        </div>
      </>);
};

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### CopyButton API

A Button preset for copy-to-clipboard actions.

```ts
interface CopyButtonProps {
  /**
   * A button can have its content and borders styled for greater emphasis or to be subtle.
   * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.
   * - 'primary': Emphasizes the button as a primary action.
   * - 'outline': Removes background styling.
   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
   * - 'transparent': Removes background and border styling.
   * @default 'secondary'
   */
  appearance?: "outline" | "subtle" | "secondary" | "primary" | "transparent";

  /**
   * Defines a string value that labels the current element.
   * Required so screen readers can differentiate multiple copy buttons on a page.
   */
  "aria-label"?: string;

  as?: "a" | "button";

  children?: any;

  className?: string;

  /**
   * Text written to the clipboard when the button is clicked.
   */
  contentToCopy: string | undefined;

  /**
   * Confirmation shown above the button after copying. Defaults to "Copied".
   */
  copiedMessage?: string;

  /**
   * A button can show that it cannot be interacted with.
   * @default false
   */
  disabled?: boolean;

  /**
   * When set, allows the button to be focusable even when it has been disabled.
   * This is used in scenarios where it is important to keep a consistent tab order
   * for screen reader and keyboard users. The primary example of this
   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
   * @default false
   * false
   */
  disabledFocusable?: boolean;

  /**
   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * A button can format its icon to appear before or after its content.
   * @default 'before'
   */
  iconPosition?: "before" | "after";

  /**
   * Called when the clipboard write fails.
   */
  onCopyError?: (() => void);

  /**
   * Called after the clipboard write completes successfully.
   */
  onCopySuccess?: (() => void);

  ref?: Ref<HTMLAnchorElement | HTMLButtonElement>;

  /**
   * A button can be rounded, circular, or square.
   * @default 'rounded'
   */
  shape?: "circular" | "rounded" | "square";

  /**
   * A button supports different sizes.
   * @default 'medium'
   */
  size?: "small" | "medium" | "large";

  style?: CSSProperties;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.