- React
- HTML

## Examples

### Basic

### Expandable

### Inline compact

### Inline compact code

### Inline compact with additional action

### Inline compact in sentence

### Inline compact with truncation

## Documentation

### Accessibility

Attribute | Applied to | Outcome
--- | --- | ---
`aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-v6-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text.
`aria-label="[input label text]"` | `.pf-v6-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. Required
`aria-hidden="true"` | `<i>` | Hides the icon from assistive technologies.
`aria-controls="[id of expandable element]"` | `.pf-v6-c-button.pf-m-control` | Identifies the element controlled by the toggle button. Required
`hidden` | `.pf-v6-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn’t visible in the UI and isn’t accessed by assistive technologies.

`aria-labelledby="[id of button] [id of input label]"`

`.pf-v6-c-button.pf-m-control`

Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. Important: If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. Alternatively this attribute can be ignored if the text input label is defined as part of the value in `aria-label`.

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. Required
`.pf-v6-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. Required
`.pf-v6-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon.
`.pf-v6-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element.
`.pf-v6-c-clipboard-copy__text` | `<span>` | Initiates the inline copy clipboard text element. Required
`.pf-v6-c-clipboard-copy__actions` | `<span>` | Initiates the inline copy clipboard actions element. Required
`.pf-v6-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. Required
`.pf-m-inline` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for inline styles.
`.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting.
`.pf-m-truncate` | `.pf-v6-c-clipboard-copy.pf-m-truncate` | Modifies the inline copy clipboard component for use with text used in trucate component.
`.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state.
`.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies the control toggle button for the expanded state.
`.pf-m-code` | `code.pf-v6-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element.

##
CSS variables