v1.0
Copy Button
Copies text data to the clipboard when the user clicks the framer component.
Uses framer interactions for transition between variants
Use within any framer component.
Applies all accessible aria attributes to ensure everyone can interact with it.
Uses native HTML Form attribute to use within any form.
Create a framer component: Using framer create a component that will use this prefab.
Add prefab: Add the prefab to the component and connect the transitions to the matching variants states.
Nest prefab: Nest prefab to the parent frame. Set the prefab position to absolute. Keep in mind that the prefab will not show visually in preview or when publish.
Test: Test the component in preview and ensure that your transitions are working.
Done: That is it! You are all set to use this prefab.
When creating the component that will be used with this prefab consider the following:
When creating your component that will use this prefab ensure that there is sufficient contrast between the different states. Read more about required contrast to pass AA WCAG requirements
This prefab sets the default div to role="button" avoid setting the parent frame as a button conflicting with the role attribute.
There are three aria-labels that change depending if it was successful, error, or ready to copy. Make it the labels as clear as possible to what the user is copying.
Property
Description
Copy Data
The string data that will copied to users clipboard.
Aria-Default
The default accessible label when the button is ready to copy.
Aria-Success
The accessible label when the button has successfully copied.
Aria-Error
The accessible label when the button has failed to copied.
Timeout
When the button will reset after the users attempts to copy.
Events
Supported events: Default, Copying, Success,Error