Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/finsweet/attributes/llms.txt

Use this file to discover all available pages before exploring further.

This guide will walk you through creating your first feature with Attributes. You’ll build a copy-to-clipboard button that shows a success message when clicked.

​
Prerequisites

Before starting, make sure you’ve installed Attributes in your project.

​
What you’ll build

A button that copies text to the clipboard with:
  • Custom text to copy
  • Visual feedback (active state)
  • Success message
  • Configurable duration

​
Step-by-step tutorial

1

Add the Copy Clip script

First, add the Attributes script with the copyclip attribute to your page footer:
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
  fs-copyclip
></script>
In Webflow, add this to Project Settings > Custom Code > Footer Code.
2

Create the trigger button

Add a button with the copy trigger attribute:
<button 
  fs-copyclip-click 
  fs-copyclip-text="Hello from Attributes!"
  fs-copyclip-message="Copied to clipboard!"
>
  Copy Text
</button>
Let’s break down the attributes:
  • fs-copyclip-click - Marks this element as the copy trigger
  • fs-copyclip-text - The text that will be copied
  • fs-copyclip-message - Success message shown to the user
3

Add visual feedback (optional)

Add a CSS class to show visual feedback when copying succeeds:
<button 
  fs-copyclip-click 
  fs-copyclip-text="Hello from Attributes!"
  fs-copyclip-message="Copied to clipboard!"
  fs-copyclip-activeclass="is-active"
  fs-copyclip-duration="2000"
>
  Copy Text
</button>
Additional attributes:
  • fs-copyclip-activeclass - CSS class added during success state (default: is-copyclip-active)
  • fs-copyclip-duration - How long the active state lasts in milliseconds (default: 1000)
Then add some CSS to style the active state:
.is-active {
  background-color: #10b981;
  color: white;
}
4

Test your button

  1. Publish your site (or preview in Webflow)
  2. Click the button
  3. Paste (Ctrl/Cmd + V) to verify the text was copied
  4. Watch the button change to the active state

​
Complete example

Here’s a complete example with HTML and CSS: 
<!DOCTYPE html>
<html>
<head>
  <style>
    .copy-button {
      padding: 12px 24px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .copy-button:hover {
      background-color: #2563eb;
    }

    .copy-button.is-active {
      background-color: #10b981;
      transform: scale(0.95);
    }
  </style>
</head>
<body>
  <button 
    class="copy-button"
    fs-copyclip-click 
    fs-copyclip-text="Hello from Attributes!"
    fs-copyclip-message="Copied!"
    fs-copyclip-activeclass="is-active"
    fs-copyclip-duration="2000"
  >
    Copy Text
  </button>

  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
    fs-copyclip
  ></script>
</body>
</html>

​
Advanced: Copy from another element

You can also copy text from another element instead of using fs-copyclip-text: 
<!-- The element containing the text to copy -->
<div fs-copyclip-copy-this>
  This text will be copied!
</div>

<!-- The trigger button -->
<button fs-copyclip-click>
  Copy Text
</button>
Or copy from a sibling element: 
<div>
  <!-- Text to copy -->
  <p fs-copyclip-copy-sibling>
    Copy this paragraph's content
  </p>
  
  <!-- Trigger button (sibling of the text) -->
  <button fs-copyclip-click>
    Copy
  </button>
</div>
When using fs-copyclip-copy-this or fs-copyclip-copy-sibling, the fs-copyclip-text attribute is ignored.

​
Try another attribute: Modal

Now that you understand the basics, let’s create a simple modal: 
<!-- Trigger button -->
<button fs-modal-open="welcome">Open Modal</button>

<!-- Modal element (hidden by default) -->
<div 
  fs-modal="welcome" 
  fs-modal-animation="fade"
  fs-modal-duration="300"
  style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center;"
>
  <div style="background: white; padding: 2rem; border-radius: 8px; max-width: 500px;">
    <h2>Welcome!</h2>
    <p>This is a modal dialog created with Attributes.</p>
    <button fs-modal-close>Close</button>
  </div>
</div>

<!-- Don't forget to add fs-modal to your script -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
  fs-copyclip
  fs-modal
></script>
Key modal attributes:
  • fs-modal="{name}" - Defines the modal element with a unique name
  • fs-modal-open="{name}" - Opens the modal with the matching name
  • fs-modal-close - Closes the modal when clicked
  • fs-modal-animation - Animation type: fade, slide-up, slide-down, grow, etc.
  • fs-modal-duration - Animation duration in milliseconds
The modal automatically handles keyboard navigation (ESC to close), focus management, and background scroll locking.

​
Understanding the attribute pattern

All Attributes follow a consistent naming pattern: 
fs-{attribute-name}-{element-or-setting}
For example:
  • fs-copyclip-click - Copy Clip’s click trigger element
  • fs-copyclip-text - Copy Clip’s text setting
  • fs-modal-open - Modal’s open trigger element
  • fs-modal-animation - Modal’s animation setting
This pattern makes it easy to learn new attributes once you understand one.

​
Next steps

Explore all attributes

Browse all 28 available attributes and their features

API reference

Learn about the JavaScript API for advanced control

Core concepts

Understand how Attributes work under the hood

Get support

Ask questions in the Finsweet community forum

​
Troubleshooting

Button doesn’t copy anything
  • Verify the script is loaded (check browser console for errors)
  • Ensure fs-copyclip attribute is on the script tag
  • Check that fs-copyclip-click is on the button
  • Confirm your browser supports the Clipboard API
Modal doesn’t open
  • Verify fs-modal attribute is on the script tag
  • Check that the fs-modal-open value matches the fs-modal value exactly
  • Ensure the modal element has display: none initially
  • Look for JavaScript errors in the browser console
Active class not applying
  • Verify the CSS class name matches the fs-copyclip-activeclass value
  • Check that your CSS is properly loaded
  • Inspect the element during the active state to see if the class is added
Open your browser’s developer console (F12) to see any error messages from Attributes. Most issues will show helpful error messages.