## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Expandable


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Inline compact


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Inline compact code


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Inline compact with additional action


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Inline compact in sentence


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Inline compact with truncation


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

## 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. |