Component

ba-copy-to-clipboard

Enables users to copy important short codes and reference numbers to their clipboards

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Design

Code

Accessibility

Anatomy

Text value

Displays the content that users can copy to their clipboard, such as an identifier, code, or reference value

Heading

Provides context for the displayed value, helping users understand the purpose or meaning of the content

Copy button

A clear and accessible button that copies the displayed value to the user's clipboard when clicked or activated via keyboard, with appropriate focus indicators and accessible labeling

Design Documentation

The ba-copy-to-clipboard component is optimised for reference codes. Using it for other information may break the component and degrade the user experience, especially when used with other languages or modified through users' accessibility settings

Although technically ba-copy-to-clipboard can go in ba-grid, and ba-grid can go in ba-message, the component should not be used in ba-message itself.

This is because the component is designed for standalone use in the body of the page and may break when placed in a component with limited space (e.g., ba-message).

We are currently investigating how to enable BAgel helper to flag this as an error and the best way to document this restriction.

Copy functionality will only work in secure contexts

The copy functionality uses the native writeText() method that will only work in secure contexts (i.e. HTTPS). If you are using this component in a non-secure context, the component will still render but the copy functionality will not populate the clipboard.

Learn more about secure contexts on MDN

Live Demo

<ba-copy-to-clipboard copy-text="ABCDEFGH" heading="Heading"></ba-copy-to-clipboard>

Properties and attributes

Property	Attribute	Description	Type	Default
`copyText`(required)	`copy-text`	Text to display in the component	`""`	`undefined`
`heading`(required)	`heading`	Sets the heading to show above the copy text	`string`	`undefined`
`headingLevel`	`heading-level`	This will set the level for the heading	`2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`3`

Permitted ARIA roles

None

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	None

Parent components

ba-copy-to-clipboard can be slotted into:

Usage

Basic usage

Most scenarios will only require the copy-text and a heading

A simple example that allows the user to copy their booking reference

<ba-copy-to-clipboard copy-text="BA1234" heading="Your booking reference"></ba-copy-to-clipboard>

Setting heading level

The heading level can be set by passing a number to the heading-level attribute. The heading level should be set by the preceding heading on the page

The heading level has been set to 3 so that it appears below the <h2> in the document outline

<h3>A heading further up on the page</h3>

...

<ba-copy-to-clipboard copy-text="BA1234" heading="Your booking reference" heading-level="4"></ba-copy-to-clipboard>

Guidelines

Users of assistive technology often navigate by headings. Including a heading makes it easier for users to find and interact with the copy to clipboard component.

It's important to maintain the order of headings so that they appear in a logical order in the page. Screen readers (and other assistive technology) rely on headings to navigate and understand structure of pages.

Note: this will not change the font size of the heading, only the semantic meaning.

State: Previous element in DOM has focus

⇥ Tab

<button> in shadow DOM gets focus

State: `<button>` in shadow has focus

␣ Space

Copies value in copy-text to the user's clipboard

⏎ Enter