Copy Button

<afp-copy-button>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A button component that copies a specified text value to the clipboard when clicked.

<afp-copy-button value="Copy Button"></afp-copy-button>

<afp-copy-button [value]="'Copy Button'"></afp-copy-button>

<AfpCopyButton value="Copy Button"></AfpCopyButton>

<AfpCopyButton :value="'Copy Button'"></AfpCopyButton>

Examples #

Variants #

Use the variant attribute to set the button's semantic variant.

<div class="afp-cluster">
  <afp-copy-button variant="neutral" value="Neutral"></afp-copy-button>
  <afp-copy-button variant="brand" value="Brand"></afp-copy-button>
  <afp-copy-button variant="accent" value="Accent"></afp-copy-button>
  <afp-copy-button variant="info" value="Info"></afp-copy-button>
  <afp-copy-button variant="error" value="Error"></afp-copy-button>
  <afp-copy-button variant="success" value="Success"></afp-copy-button>
  <afp-copy-button variant="warning" value="Warning"></afp-copy-button>
</div>

<div class="afp-cluster">
  <afp-copy-button [variant]="'neutral'" [value]="'Neutral'"></afp-copy-button>
  <afp-copy-button [variant]="'brand'" [value]="'Brand'"></afp-copy-button>
  <afp-copy-button [variant]="'accent'" [value]="'Accent'"></afp-copy-button>
  <afp-copy-button [variant]="'info'" [value]="'Info'"></afp-copy-button>
  <afp-copy-button [variant]="'error'" [value]="'Error'"></afp-copy-button>
  <afp-copy-button [variant]="'success'" [value]="'Success'"></afp-copy-button>
  <afp-copy-button [variant]="'warning'" [value]="'Warning'"></afp-copy-button>
</div>

<div class="afp-cluster">
  <AfpCopyButton variant="neutral" value="Neutral"></AfpCopyButton>
  <AfpCopyButton variant="brand" value="Brand"></AfpCopyButton>
  <AfpCopyButton variant="accent" value="Accent"></AfpCopyButton>
  <AfpCopyButton variant="info" value="Info"></AfpCopyButton>
  <AfpCopyButton variant="error" value="Error"></AfpCopyButton>
  <AfpCopyButton variant="success" value="Success"></AfpCopyButton>
  <AfpCopyButton variant="warning" value="Warning"></AfpCopyButton>
</div>

<div class="afp-cluster">
  <AfpCopyButton :variant="'neutral'" :value="'Neutral'"></AfpCopyButton>
  <AfpCopyButton :variant="'brand'" :value="'Brand'"></AfpCopyButton>
  <AfpCopyButton :variant="'accent'" :value="'Accent'"></AfpCopyButton>
  <AfpCopyButton :variant="'info'" :value="'Info'"></AfpCopyButton>
  <AfpCopyButton :variant="'error'" :value="'Error'"></AfpCopyButton>
  <AfpCopyButton :variant="'success'" :value="'Success'"></AfpCopyButton>
  <AfpCopyButton :variant="'warning'" :value="'Warning'"></AfpCopyButton>
</div>

Appearance #

Use the appearance attribute to change the button's visual appearance.

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-copy-button appearance="default" variant="neutral" value="Default"></afp-copy-button>
    <afp-copy-button appearance="filled" variant="neutral" value="Filled"></afp-copy-button>
    <afp-copy-button appearance="outlined" variant="neutral" value="Outlined"></afp-copy-button>
    <afp-copy-button appearance="outlined-filled" variant="neutral" value="Outlined filled"></afp-copy-button>
    <afp-copy-button appearance="plain" variant="neutral" value="Plain"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button appearance="default" variant="brand" value="Default"></afp-copy-button>
    <afp-copy-button appearance="filled" variant="brand" value="Filled"></afp-copy-button>
    <afp-copy-button appearance="outlined" variant="brand" value="Outlined"></afp-copy-button>
    <afp-copy-button appearance="outlined-filled" variant="brand" value="Outlined filled"></afp-copy-button>
    <afp-copy-button appearance="plain" variant="brand" value="Plain"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button appearance="default" variant="accent" value="Default"></afp-copy-button>
    <afp-copy-button appearance="filled" variant="accent" value="Filled"></afp-copy-button>
    <afp-copy-button appearance="outlined" variant="accent" value="Outlined"></afp-copy-button>
    <afp-copy-button appearance="outlined-filled" variant="accent" value="Outlined filled"></afp-copy-button>
    <afp-copy-button appearance="plain" variant="accent" value="Plain"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button appearance="default" variant="info" value="Default"></afp-copy-button>
    <afp-copy-button appearance="filled" variant="info" value="Filled"></afp-copy-button>
    <afp-copy-button appearance="outlined" variant="info" value="Outlined"></afp-copy-button>
    <afp-copy-button appearance="outlined-filled" variant="info" value="Outlined filled"></afp-copy-button>
    <afp-copy-button appearance="plain" variant="info" value="Plain"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button appearance="default" variant="error" value="Default"></afp-copy-button>
    <afp-copy-button appearance="filled" variant="error" value="Filled"></afp-copy-button>
    <afp-copy-button appearance="outlined" variant="error" value="Outlined"></afp-copy-button>
    <afp-copy-button appearance="outlined-filled" variant="error" value="Outlined filled"></afp-copy-button>
    <afp-copy-button appearance="plain" variant="error" value="Plain"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button appearance="default" variant="success" value="Default"></afp-copy-button>
    <afp-copy-button appearance="filled" variant="success" value="Filled"></afp-copy-button>
    <afp-copy-button appearance="outlined" variant="success" value="Outlined"></afp-copy-button>
    <afp-copy-button appearance="outlined-filled" variant="success" value="Outlined filled"></afp-copy-button>
    <afp-copy-button appearance="plain" variant="success" value="Plain"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button appearance="default" variant="warning" value="Default"></afp-copy-button>
    <afp-copy-button appearance="filled" variant="warning" value="Filled"></afp-copy-button>
    <afp-copy-button appearance="outlined" variant="warning" value="Outlined"></afp-copy-button>
    <afp-copy-button appearance="outlined-filled" variant="warning" value="Outlined filled"></afp-copy-button>
    <afp-copy-button appearance="plain" variant="warning" value="Plain"></afp-copy-button>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-copy-button [appearance]="'default'" [variant]="'neutral'" [value]="'Default'"></afp-copy-button>
    <afp-copy-button [appearance]="'filled'" [variant]="'neutral'" [value]="'Filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined'" [variant]="'neutral'" [value]="'Outlined'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined-filled'" [variant]="'neutral'" [value]="'Outlined filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'plain'" [variant]="'neutral'" [value]="'Plain'"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button [appearance]="'default'" [variant]="'brand'" [value]="'Default'"></afp-copy-button>
    <afp-copy-button [appearance]="'filled'" [variant]="'brand'" [value]="'Filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined'" [variant]="'brand'" [value]="'Outlined'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined-filled'" [variant]="'brand'" [value]="'Outlined filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'plain'" [variant]="'brand'" [value]="'Plain'"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button [appearance]="'default'" [variant]="'accent'" [value]="'Default'"></afp-copy-button>
    <afp-copy-button [appearance]="'filled'" [variant]="'accent'" [value]="'Filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined'" [variant]="'accent'" [value]="'Outlined'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined-filled'" [variant]="'accent'" [value]="'Outlined filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'plain'" [variant]="'accent'" [value]="'Plain'"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button [appearance]="'default'" [variant]="'info'" [value]="'Default'"></afp-copy-button>
    <afp-copy-button [appearance]="'filled'" [variant]="'info'" [value]="'Filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined'" [variant]="'info'" [value]="'Outlined'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined-filled'" [variant]="'info'" [value]="'Outlined filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'plain'" [variant]="'info'" [value]="'Plain'"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button [appearance]="'default'" [variant]="'error'" [value]="'Default'"></afp-copy-button>
    <afp-copy-button [appearance]="'filled'" [variant]="'error'" [value]="'Filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined'" [variant]="'error'" [value]="'Outlined'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined-filled'" [variant]="'error'" [value]="'Outlined filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'plain'" [variant]="'error'" [value]="'Plain'"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button [appearance]="'default'" [variant]="'success'" [value]="'Default'"></afp-copy-button>
    <afp-copy-button [appearance]="'filled'" [variant]="'success'" [value]="'Filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined'" [variant]="'success'" [value]="'Outlined'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined-filled'" [variant]="'success'" [value]="'Outlined filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'plain'" [variant]="'success'" [value]="'Plain'"></afp-copy-button>
  </div>
  <div class="afp-cluster">
    <afp-copy-button [appearance]="'default'" [variant]="'warning'" [value]="'Default'"></afp-copy-button>
    <afp-copy-button [appearance]="'filled'" [variant]="'warning'" [value]="'Filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined'" [variant]="'warning'" [value]="'Outlined'"></afp-copy-button>
    <afp-copy-button [appearance]="'outlined-filled'" [variant]="'warning'" [value]="'Outlined filled'"></afp-copy-button>
    <afp-copy-button [appearance]="'plain'" [variant]="'warning'" [value]="'Plain'"></afp-copy-button>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpCopyButton appearance="default" variant="neutral" value="Default"></AfpCopyButton>
    <AfpCopyButton appearance="filled" variant="neutral" value="Filled"></AfpCopyButton>
    <AfpCopyButton appearance="outlined" variant="neutral" value="Outlined"></AfpCopyButton>
    <AfpCopyButton appearance="outlined-filled" variant="neutral" value="Outlined filled"></AfpCopyButton>
    <AfpCopyButton appearance="plain" variant="neutral" value="Plain"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton appearance="default" variant="brand" value="Default"></AfpCopyButton>
    <AfpCopyButton appearance="filled" variant="brand" value="Filled"></AfpCopyButton>
    <AfpCopyButton appearance="outlined" variant="brand" value="Outlined"></AfpCopyButton>
    <AfpCopyButton appearance="outlined-filled" variant="brand" value="Outlined filled"></AfpCopyButton>
    <AfpCopyButton appearance="plain" variant="brand" value="Plain"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton appearance="default" variant="accent" value="Default"></AfpCopyButton>
    <AfpCopyButton appearance="filled" variant="accent" value="Filled"></AfpCopyButton>
    <AfpCopyButton appearance="outlined" variant="accent" value="Outlined"></AfpCopyButton>
    <AfpCopyButton appearance="outlined-filled" variant="accent" value="Outlined filled"></AfpCopyButton>
    <AfpCopyButton appearance="plain" variant="accent" value="Plain"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton appearance="default" variant="info" value="Default"></AfpCopyButton>
    <AfpCopyButton appearance="filled" variant="info" value="Filled"></AfpCopyButton>
    <AfpCopyButton appearance="outlined" variant="info" value="Outlined"></AfpCopyButton>
    <AfpCopyButton appearance="outlined-filled" variant="info" value="Outlined filled"></AfpCopyButton>
    <AfpCopyButton appearance="plain" variant="info" value="Plain"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton appearance="default" variant="error" value="Default"></AfpCopyButton>
    <AfpCopyButton appearance="filled" variant="error" value="Filled"></AfpCopyButton>
    <AfpCopyButton appearance="outlined" variant="error" value="Outlined"></AfpCopyButton>
    <AfpCopyButton appearance="outlined-filled" variant="error" value="Outlined filled"></AfpCopyButton>
    <AfpCopyButton appearance="plain" variant="error" value="Plain"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton appearance="default" variant="success" value="Default"></AfpCopyButton>
    <AfpCopyButton appearance="filled" variant="success" value="Filled"></AfpCopyButton>
    <AfpCopyButton appearance="outlined" variant="success" value="Outlined"></AfpCopyButton>
    <AfpCopyButton appearance="outlined-filled" variant="success" value="Outlined filled"></AfpCopyButton>
    <AfpCopyButton appearance="plain" variant="success" value="Plain"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton appearance="default" variant="warning" value="Default"></AfpCopyButton>
    <AfpCopyButton appearance="filled" variant="warning" value="Filled"></AfpCopyButton>
    <AfpCopyButton appearance="outlined" variant="warning" value="Outlined"></AfpCopyButton>
    <AfpCopyButton appearance="outlined-filled" variant="warning" value="Outlined filled"></AfpCopyButton>
    <AfpCopyButton appearance="plain" variant="warning" value="Plain"></AfpCopyButton>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpCopyButton :appearance="'default'" :variant="'neutral'" :value="'Default'"></AfpCopyButton>
    <AfpCopyButton :appearance="'filled'" :variant="'neutral'" :value="'Filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined'" :variant="'neutral'" :value="'Outlined'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined-filled'" :variant="'neutral'" :value="'Outlined filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'plain'" :variant="'neutral'" :value="'Plain'"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton :appearance="'default'" :variant="'brand'" :value="'Default'"></AfpCopyButton>
    <AfpCopyButton :appearance="'filled'" :variant="'brand'" :value="'Filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined'" :variant="'brand'" :value="'Outlined'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined-filled'" :variant="'brand'" :value="'Outlined filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'plain'" :variant="'brand'" :value="'Plain'"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton :appearance="'default'" :variant="'accent'" :value="'Default'"></AfpCopyButton>
    <AfpCopyButton :appearance="'filled'" :variant="'accent'" :value="'Filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined'" :variant="'accent'" :value="'Outlined'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined-filled'" :variant="'accent'" :value="'Outlined filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'plain'" :variant="'accent'" :value="'Plain'"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton :appearance="'default'" :variant="'info'" :value="'Default'"></AfpCopyButton>
    <AfpCopyButton :appearance="'filled'" :variant="'info'" :value="'Filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined'" :variant="'info'" :value="'Outlined'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined-filled'" :variant="'info'" :value="'Outlined filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'plain'" :variant="'info'" :value="'Plain'"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton :appearance="'default'" :variant="'error'" :value="'Default'"></AfpCopyButton>
    <AfpCopyButton :appearance="'filled'" :variant="'error'" :value="'Filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined'" :variant="'error'" :value="'Outlined'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined-filled'" :variant="'error'" :value="'Outlined filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'plain'" :variant="'error'" :value="'Plain'"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton :appearance="'default'" :variant="'success'" :value="'Default'"></AfpCopyButton>
    <AfpCopyButton :appearance="'filled'" :variant="'success'" :value="'Filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined'" :variant="'success'" :value="'Outlined'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined-filled'" :variant="'success'" :value="'Outlined filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'plain'" :variant="'success'" :value="'Plain'"></AfpCopyButton>
  </div>
  <div class="afp-cluster">
    <AfpCopyButton :appearance="'default'" :variant="'warning'" :value="'Default'"></AfpCopyButton>
    <AfpCopyButton :appearance="'filled'" :variant="'warning'" :value="'Filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined'" :variant="'warning'" :value="'Outlined'"></AfpCopyButton>
    <AfpCopyButton :appearance="'outlined-filled'" :variant="'warning'" :value="'Outlined filled'"></AfpCopyButton>
    <AfpCopyButton :appearance="'plain'" :variant="'warning'" :value="'Plain'"></AfpCopyButton>
  </div>
</div>

Shapes #

Use the shape attribute to change the button's shape.

<div class="afp-cluster">
  <afp-copy-button shape="pill" value="Pill"></afp-copy-button>
  <afp-copy-button shape="rounded" value="Rounded"></afp-copy-button>
  <afp-copy-button shape="soft" value="Soft"></afp-copy-button>
  <afp-copy-button shape="square" value="Square"></afp-copy-button>
</div>

<div class="afp-cluster">
  <afp-copy-button [shape]="'pill'" [value]="'Pill'"></afp-copy-button>
  <afp-copy-button [shape]="'rounded'" [value]="'Rounded'"></afp-copy-button>
  <afp-copy-button [shape]="'soft'" [value]="'Soft'"></afp-copy-button>
  <afp-copy-button [shape]="'square'" [value]="'Square'"></afp-copy-button>
</div>

<div class="afp-cluster">
  <AfpCopyButton shape="pill" value="Pill"></AfpCopyButton>
  <AfpCopyButton shape="rounded" value="Rounded"></AfpCopyButton>
  <AfpCopyButton shape="soft" value="Soft"></AfpCopyButton>
  <AfpCopyButton shape="square" value="Square"></AfpCopyButton>
</div>

<div class="afp-cluster">
  <AfpCopyButton :shape="'pill'" :value="'Pill'"></AfpCopyButton>
  <AfpCopyButton :shape="'rounded'" :value="'Rounded'"></AfpCopyButton>
  <AfpCopyButton :shape="'soft'" :value="'Soft'"></AfpCopyButton>
  <AfpCopyButton :shape="'square'" :value="'Square'"></AfpCopyButton>
</div>

Sizes #

Use --afp-copy-button-size CSS variable to change a button's size.

<div class="afp-cluster afp-align-center">
  <afp-copy-button value="Custom size" style="--afp-copy-button-size: 2rem"></afp-copy-button>
  <afp-copy-button value="Custom size" style="--afp-copy-button-size: 2.5rem"></afp-copy-button>
  <afp-copy-button value="Custom size" style="--afp-copy-button-size: 3rem"></afp-copy-button>
</div>

<div class="afp-cluster afp-align-center">
  <afp-copy-button [value]="'Custom size'" [style]="'--afp-copy-button-size: 2rem'"></afp-copy-button>
  <afp-copy-button [value]="'Custom size'" [style]="'--afp-copy-button-size: 2.5rem'"></afp-copy-button>
  <afp-copy-button [value]="'Custom size'" [style]="'--afp-copy-button-size: 3rem'"></afp-copy-button>
</div>

<div class="afp-cluster afp-align-center">
  <AfpCopyButton value="Custom size" style="--afp-copy-button-size: 2rem"></AfpCopyButton>
  <AfpCopyButton value="Custom size" style="--afp-copy-button-size: 2.5rem"></AfpCopyButton>
  <AfpCopyButton value="Custom size" style="--afp-copy-button-size: 3rem"></AfpCopyButton>
</div>

<div class="afp-cluster afp-align-center">
  <AfpCopyButton :value="'Custom size'" :style="'--afp-copy-button-size: 2rem'"></AfpCopyButton>
  <AfpCopyButton :value="'Custom size'" :style="'--afp-copy-button-size: 2.5rem'"></AfpCopyButton>
  <AfpCopyButton :value="'Custom size'" :style="'--afp-copy-button-size: 3rem'"></AfpCopyButton>
</div>

Use the tooltip attribute to change the tooltip text.

<afp-copy-button value="Custom tooltip text" tooltip="Copy to clipboard"></afp-copy-button>

<afp-copy-button [value]="'Custom tooltip text'" [tooltip]="'Copy to clipboard'"></afp-copy-button>

<AfpCopyButton value="Custom tooltip text" tooltip="Copy to clipboard"></AfpCopyButton>

<AfpCopyButton :value="'Custom tooltip text'" :tooltip="'Copy to clipboard'"></AfpCopyButton>

Use the noTooltip (notooltip) attribute to disable the tooltip.

<afp-copy-button value="No tooltip" notooltip></afp-copy-button>

<afp-copy-button [value]="'No tooltip'" notooltip></afp-copy-button>

<AfpCopyButton value="No tooltip" notooltip></AfpCopyButton>

<AfpCopyButton :value="'No tooltip'" notooltip></AfpCopyButton>

Disabled #

Use the disabled attribute to disable the copy button.

<afp-copy-button value="Disabled" disabled></afp-copy-button>

<afp-copy-button [value]="'Disabled'" disabled></afp-copy-button>

<AfpCopyButton value="Disabled" disabled></AfpCopyButton>

<AfpCopyButton :value="'Disabled'" disabled></AfpCopyButton>

Duration #

Use the duration attribute to set how long the success state lasts (in milliseconds).

<afp-copy-button value="Custom Duration" duration="500"></afp-copy-button>

<afp-copy-button [value]="'Custom Duration'" [duration]=500></afp-copy-button>

<AfpCopyButton value="Custom Duration" duration="500"></AfpCopyButton>

<AfpCopyButton :value="'Custom Duration'" :duration=500></AfpCopyButton>

Custom Icons #

Use the icon and icon-success slots to provide custom icons for the copy and success states.

<afp-copy-button value="Custom Icons">
  <afp-icon slot="icon" name="clipboard"></afp-icon>
  <afp-icon slot="icon-success" name="clipboard-check"></afp-icon>
</afp-copy-button>

<afp-copy-button [value]="'Custom Icons'">
  <afp-icon [slot]="'icon'" [name]="'clipboard'"></afp-icon>
  <afp-icon [slot]="'icon-success'" [name]="'clipboard-check'"></afp-icon>
</afp-copy-button>

<AfpCopyButton value="Custom Icons">
  <AfpIcon slot="icon" name="clipboard"></AfpIcon>
  <AfpIcon slot="icon-success" name="clipboard-check"></AfpIcon>
</AfpCopyButton>

<AfpCopyButton :value="'Custom Icons'">
  <AfpIcon :slot="'icon'" :name="'clipboard'"></AfpIcon>
  <AfpIcon :slot="'icon-success'" :name="'clipboard-check'"></AfpIcon>
</AfpCopyButton>

Properties

Learn more about properties.

Name Description Reflects

tooltip

Tooltip text displayed on hover.

Type string

Default 'Copy'

noTooltip
notooltip

If true, the tooltip is not displayed.

Type boolean

Default false

value

The text value to be copied to the clipboard when the button is clicked.

Type string

duration

Duration in milliseconds for which the success state is shown after copying.

Type number

Default 1000

disabled

If true, the copy button is disabled.

Type boolean

open

Whether the tooltip is currently open.

Type boolean

Default false

variant

Variant of the copy button.

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

shape

Shape of the copy button.

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.ROUNDED

appearance

Appearance of the copy button.

Type

AfpAppearance

Name	Description
`DEFAULT`	Highlighted, primary action (default).
`OUTLINED`	Transparent background with a visible border.
`PLAIN`	Minimal, no border or background.
`FILLED`	Solid background, no border.
`OUTLINED_FILLED`	Solid background with a visible border.

AfpAppearance

Default AfpAppearance.FILLED

Events

Learn more about events.

Name	Return	Description
`afp-click`	`void`	Emitted when the copy button is clicked.
`afp-focus`	`void`	Emitted when the copy button gains focus.
`afp-blur`	`void`	Emitted when the copy button loses focus.

Slots

Learn more about slots.

Name	Description
`icon`	Used to pass in a custom icon for the copy action.
`icon-success`	Used to pass in a custom icon for the success state after copying.

Internationalization

Learn more about internationalization.

Key	Description
`copy-button.aria-label`	Aria label for the copy button.
`copy-button.success`	Text announced when the copy action is successful. Used for screen readers.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The button element.	`::part(base)`
`icon-wrapper`	The wrapper for the copy icon.	`::part(icon-wrapper)`
`icon`	The copy icon.	`::part(icon)`
`icon-success-wrapper`	The wrapper for the success icon.	`::part(icon-success-wrapper)`
`icon-success`	The success icon.	`::part(icon-success)`
`tooltip`	The tooltip element.	`::part(tooltip)`

CSS Custom Properties

Name	Description	Default
`--afp-copy-button-disabled-opacity`	The opacity of the copy button when disabled.	`0.5`
`--afp-copy-button-size`	The size of the copy button.	`--afp-size-s`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

afp-tooltip

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/copy-button/copy-button.js';

Copy Button

Examples #

Variants #

Appearance #

Shapes #

Sizes #

Tooltip text #

Without Tooltip #

Disabled #

Duration #

Custom Icons #

Properties

Events

Slots

Internationalization

CSS Parts

CSS Custom Properties

Dependencies

Importing