Clipboard Copy Button

Tips & examples

A compact interactive action button decorated with a clipboard icon and text label that copies a target string value directly to the user’s system clipboard on click.

When to use

Allowing users to instantly copy strings, API keys, codes, URLs, or dynamic expression outputs to their system clipboard upon clicking a button.
Providing quick-copy utilities alongside read-only code blocks, order IDs, or access tokens.

What you need

Static strings, generated codes, API keys, dynamic query field values, or calculated string expressions.

Examples

A copy button positioned next to a user API key input that copies the secret key string to the clipboard.
A quick-action button in an order confirmation view copying the generated tracking code.

Avoid

Using to submit form payloads or trigger database mutations — use a standard action button or submit button component instead.
Allocating unnecessarily large grid canvas dimensions — keep this compact button component sized to 1 row tall and 2 to 4 columns wide.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Setup

ValuerequiredCustom expression: The string value to be copied to the clipboard. Accepts a static text input or custom expression.
Example dynamicQueries.getApiKey
Default: buildCustomExpressionValue(null)

Display

IconoptionalCustom expression (text): Dropdown list of system icon choices to display on the button face (recommends using ‘class’ for clipboard icon styling).
Example class
Default: none
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: false

Styling

ColoroptionalOne of: primary, secondary, success, error, warning, info, default, lighter, disabled, white, black (or not set)

Sets the button text and icon color via palette dropdown or custom expression.

Choices

primary — Theme default branding blue color (#007bff).
secondary — Muted branding slate gray color (#6c757d).
success — Standard transactional green color (#28a745).
error — Severe action warning red color (#dc3545).
warning — Cautionary yellow color (#ffc107).
info — Informing teal/light blue color (#17a2b8).
default — Dark charcoal text color (#343a40).
lighter
disabled — Non-interactive gray color (#adb5bd).
white — Plain white color (#ffffff).
black — Plain black color (#000000).

Default: none

VariantoptionalOne of: outlined, contained

Controls the visual button frame style.

Choices

outlined
contained

Default: none

Sizing

Minimum size: 1 × 1 grid cells (width × height).

Translatable labels

label — Text label displayed on the face of the copy button.

Accessibility

Renders as a semantic <button> element. Interacting with the button provides browser clipboard feedback and ARIA live region confirmation announcements.

Spacebar or Enter activates the button to trigger the copy action.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
{
  "config": {
    "value": "@@expression:'value'"
  }
}

1
2
3
4
5
6
7
8
9
{
  "config": {
    "value": "@@expression:'value'",
    "disabled": false,
    "icon": "@@expression:'value'",
    "color": "primary",
    "variant": "outlined"
  }
}

Ready-made setups

API Key Copy Button ↕

Configures a compact 2x1 contained button that copies a dynamic API key expression to the clipboard using the ‘class’ icon.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
  "config": {
    "setup": {
      "valueExpression": "@@expression: user.apiKey"
    },
    "translation": {
      "label": "Copy Code"
    },
    "display": {
      "icon": "class",
      "disabledExpression": "@@expression: false"
    },
    "styling": {
      "textColorExpression": "primary",
      "variant": "Contained"
    }
  }
}