Prefabs

Primitives

Library

Learn

Get full access

Prefabs

Example

Copy Prefab

Copy Sample

Clipboard

Prefab that handles clipboard interactions of copy.

Why use this prefab?

Framer provides a clipboard component, but it is limited in how it can be used. It lacks support for accounting for error, success and setting accessible attributes. Using this prefab you can ensure accessibility best practices without disruption Framer's component creation flow.

Why use this prefab?

Framer provides a clipboard component, but it is limited in how it can be used. It lacks support for accounting for error, success and setting accessible attributes. Using this prefab you can ensure accessibility best practices without disruption Framer's component creation flow.

Why use this prefab?

Framer provides a clipboard component, but it is limited in how it can be used. It lacks support for accounting for error, success and setting accessible attributes. Using this prefab you can ensure accessibility best practices without disruption Framer's component creation flow.

Features

Features

Features

Uses framer events for transitions between variants

Use any framer component all styling done within framer canvas not in the code or sidebar.

Applies all accessible aria attributes to ensure everyone can interact with it.

Uses native HTML Form attribute to use within any form.

Accounts for states like error, success and copying

How to use

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.

Component properties

Property

Default

Description

Copy Data

String

The text data that will be copy to the users clipboard

Aria Default

String

Sets aria-label of the button.

Aria Success

String

Sets aria-label of the button when successful

Aria Error

String

Sets aria-label of the button when error occurs

Timeout

Number

Sets the delay before transitioning back to default from any state.

A11Y

Object

Contains outline style properties for the prefab.

Events

Interactions

Supported events: default, copying, success, error