import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs } from '../../globals/internal/storybook-cdn';
import * as CopyButtonStories from './copy-button.stories';

<Meta of={CopyButtonStories} />

# Copy button

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

## Table of Contents

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

## 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} />

## Component API

<ArgTypes of="cds-copy-button" />

<Markdown>{`${cdnJs({ components: ['copy-button'] })}`}</Markdown>

## 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/web-components/src/components/copy-button/copy-button.mdx).
