import { ArgTypes, Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
import * as CopyButtonStories from './CopyButton.stories.js';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# CopyButton

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/CopyButton)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/patterns/common-actions/#copy)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [Component API](#component-api)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

The copy button should be accompanied by a tooltip. Tooltip feedback text should
be concise and describe the action taken when the user clicks the copy button.
By default we display the text “Copied!”.

<Canvas
  of={CopyButtonStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(CopyButtonStories.Default),
    },
  ]}
/>

## Component API

<ArgTypes />

## Feedback

Help us improve this component by providing feedback through, asking questions
on Slack, or updating this file on GitHub
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/CopyButton/CopyButton.mdx).
