Clipboard

New version v0.0.4 🚀

Phoenix LiveView copy-to-clipboard component with customizable timeout, dynamic labels, accessibility features, status messages, and copy feedback.

Installation:

mix mishka.ui.gen.component clipboard

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS

Overview of the Phoenix and LiveView Clipboard Component

The Phoenix LiveView Clipboard component provides an elegant and customizable interface for copying text content to the user's clipboard. It's designed for various use-cases like copying static text, dynamic values, or text from external inputs and code blocksو all with visual feedback and support for success and error states..

This is your private API key. Click the button to copy it and keep it secure.


1 defmodule MyApp do
2   def hello  do
3     "world"
4   end
5 end

Experience the innovative capabilities of the Clipboard component and hook from Mishka Chelekom, seamlessly integrated into Phoenix LiveView to empower your web applications with dynamic copy functionality. This feature ensures that essential information from documentation links to code snippets can be effortlessly copied, enhancing both accessibility and user engagement. To instantly copy the complete guide URL for further insights, simply and explore our comprehensive resources.

Text prop

The text prop allows you to define a static string that will be copied to the user's clipboard when the trigger is activated. When this prop is set, it takes priority over both target_selector and the slot content.

This is ideal for simple copy actions like copying an email, token, or URL where the content is known ahead of time and doesn’t rely on the DOM.

<.clipboard text="[email protected]">
  <:trigger>
    <button>Copy Email</button>
  </:trigger>
</.clipboard>

Target selector prop

The target_selector prop accepts a valid CSS selector pointing to another DOM element. When the copy trigger is activated, the content of the targeted element will be copied to the clipboard.

This is useful when the content to be copied exists elsewhere on the page and you do not want to duplicate it. If both text and target_selector are provided, text takes precedence.

https://mishka.tools/docs

<div id="copy-me">https://mishka.tools/chelekom/docs/clipboard</div>

<.clipboard target_selector="#copy-me">
  <:trigger>
    <button>Copy Link</button>
  </:trigger>
</.clipboard>

Timeout prop

The timeout prop sets how long (in milliseconds) the visual feedback (success or error state) should remain visible after a copy attempt. The default value is 2000, which means the status message and any temporary styling will reset after 2 seconds.

You can customize this duration to better fit your UX. For example, a shorter timeout might be preferred in fast-paced interfaces, while a longer one gives users more time to notice the feedback.

<.clipboard text="https://mishka.tools" timeout={4000}>
  <:trigger>
    <button>Copy URL</button>
  </:trigger>
</.clipboard>

Success class prop

The success_class prop defines the CSS class that will be temporarily added to the copy trigger element when the copy operation is successful. By default, it uses "clipboard-success".

This allows you to apply custom styles such as background changes, icons, or animations to indicate that the copy worked. The class is automatically removed after the duration defined by the timeout prop.

<.clipboard text="Invite Code: CHELEKOM123" success_class="bg-green-500 text-white">
  <:trigger>
    <button class="px-3 py-1 border rounded">Copy Code</button>
  </:trigger>
</.clipboard>

<!--Use it inside inline-->
<p class="text-[14px] leading-8">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry
  <.clipboard class=""
    text="Text you wanna copy"
    show_status_text={false}
    success_class="text-emerald-500 dark:text-emerald-800"
  >
    <:trigger>
      <button class="">
        <span class="mr-1">copy</span>
        <.icon name="hero-clipboard-document-list" class="size-4" />
      </button>
    </:trigger>
  </.clipboard> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>

Error class prop

The error_class prop defines the CSS class that will be temporarily added to the trigger element when the copy action fails. The default value is "clipboard-error".

You can use this to provide immediate visual feedback, such as a red background or shake animation, when something goes wrong (e.g. clipboard permissions denied). The class is automatically removed after the duration specified by the timeout prop.

<.clipboard text="this-will-fail!" error_class="bg-red-500 text-white">
  <:trigger>
    <button class="px-3 py-1 border rounded">Copy Text</button>
  </:trigger>
</.clipboard>

Copy success text prop

The copy_success_text prop defines the message that appears in the status element when the copy operation is successful. This text is visible to screen readers and any live UI feedback components.

By default, it uses a localized value from Gettext — "Copied!". You can override it with a custom string or use translated strings to support localization in your app.

<.clipboard text="https://chelekom.tools" copy_success_text="Link copied successfully!">
  <:trigger>
    <button>Copy Link</button>
  </:trigger>
</.clipboard>

Copy error text prop

The copy_error_text prop defines the message shown in the status element when the copy operation fails. This message is announced to assistive technologies and can also be styled or animated as part of your feedback system.

By default, the message is pulled from your Gettext module and displays "Copy failed". You can customize this message with a static string or localized translation to match your tone or brand voice.

<.clipboard text={@maybe_invalid_value} copy_error_text="Oops! Something went wrong.">
  <:trigger>
    <button>Try Copy</button>
  </:trigger>
</.clipboard>

Copy button label prop

The copy_button_label prop provides an accessible label for the clipboard trigger, intended for screen readers. This helps users who rely on assistive technology understand the purpose of the copy button.

If not provided, it defaults to the localized string "Copy to clipboard". You can override it with custom text or a translated value based on your accessibility and localization needs.

<.clipboard text="[email protected]" copy_button_label="Copy email address to clipboard">
  <:trigger>
    <button aria-hidden="true">📋</button>
  </:trigger>
</.clipboard>

Copy button ARIA label override

The copy_button_aria_label prop allows you to explicitly set an aria-label on the copy trigger element, overriding the default copy_button_label value.

This is useful when you want full control over the accessibility label, especially for more specific screen reader messaging. If this prop is not set, the component will fall back to copy_button_label or the default localized string.

<.clipboard text="[email protected]" copy_button_aria_label="Copy email">
  <:trigger>
    <button aria-hidden="true">📧</button>
  </:trigger>
</.clipboard>

Text description prop

The text_description prop provides an optional description of the content being copied. This text is visually hidden using a sr-only class but announced by screen readers when the user focuses on the trigger.

It’s helpful for improving accessibility when the content being copied is not clearly explained by visible UI elements, like when using just an icon or symbol as the trigger.

<.clipboard
  text="https://mishka.tools/chelekom/docs"
  text_description="This button copies the documentation link to your clipboard"
>
  <:trigger>
    <button aria-hidden="true">🔗</button>
  </:trigger>
</.clipboard>

Content slot

The :content slot allows you to provide fallback content to be copied if neither text nor target_selector are defined.

This is useful for inline or dynamic content that exists within the component itself. The rendered content inside this slot will automatically be used as the copy source.

Invite code: CHELEKOM2025

<.clipboard>
  <:content>
    Invite code: <span class="font-mono">CHELEKOM2025</span>
  </:content>
  <:trigger>
    <button>Copy Code</button>
  </:trigger>
</.clipboard>

Trigger slot

The :trigger slot defines the element that activates the copy action when clicked (or focused + "Enter" key pressed). This slot is required and must wrap a clickable element like a button, icon, or link.

The trigger is automatically enhanced with accessibility attributes and copy behavior through a JavaScript hook. You can style or structure it however you'd like — the slot gives you full control over the UI.

<.clipboard text="https://mishka.tools/chelekom">
  <:trigger>
    <button class="bg-blue-500 text-white px-3 py-1 rounded">Copy Link</button>
  </:trigger>
</.clipboard>

Status class prop

The status_class prop allows you to apply custom CSS classes to the status message element that appears after a copy action (either success or failure).

By default, the component adds a clipboard-status class for base styling. You can extend or override the styles by providing additional classes using status_class, allowing full control over appearance (e.g. color, size, animation).

<.clipboard
  text="mishka.tools"
  copy_success_text="Copied successfully!"
  status_class="text-green-600 font-semibold text-sm mt-1"
>
  <:trigger>
    <button class="px-3 py-1 border rounded">Copy</button>
  </:trigger>
</.clipboard>

Show status text prop in Phoenix LiveView clipboard component

The show_status_text prop determines whether the visual feedback message (such as “Copied!” or “Copy failed”) should be displayed in the DOM.

By default, it is set to true, which means the component will render a <span> element containing the status message. If you set it to false, the message will not appear visibly, but accessibility support (via aria-live) and visual feedback (like success/error classes) still work.

<.clipboard
  text="my-secret-token"
  show_status_text={false}
  success_class="bg-green-500 text-white"
  copy_success_text="Copied!"
>
  <:trigger>
    <button class="btn btn-primary">Copy</button>
  </:trigger>
</.clipboard>

Dynamic Label Prop in Phoenix LiveView Clipboard Component

The dynamic_label prop determines whether the text inside the clipboard label should change based on copy success or failure.

By default, it is set to false, which means the clipboard label text remains static. If you set it to true, the text inside the label will dynamically update when the clipboard operation succeeds or fails, providing real-time feedback to the user.

<.clipboard
  text="https://mishka.tools/chelekom/docs"
  show_status_text={false}
  success_class="bg-green-500 text-white rounde"
  copy_success_text="✅ Copied!"
  copy_error_text="❌ Failed"
  dynamic_label={true}
>
  <:trigger>
    <button>
      📋 Copy
    </button>
  </:trigger>
</.clipboard>

Content class Prop

The content_class prop defines the CSS class applied to the container of the status message shown after a copy operation.

This allows you to control the visual styling of the feedback area where messages like copy_success_text or copy_error_text are rendered.

Invite code: CHELEKOM2025

<.clipboard
  content_class="block mt-2"
  >
  <:trigger>
    <button class="btn btn-primary">Copy</button>
  </:trigger>
  <:content>
    Invite code: <span class="font-mono">CHELEKOM2025</span>
  </:content>

</.clipboard>

Clipboard component props

Name	Type	Required	Description
id	string	No	Unique ID for the clipboard container. If not set, a random one will be generated.
class	string	No	Optional custom classes for styling the clipboard wrapper.
text	string	No	Static text to copy. Overrides content or `target_selector` if present.
target_selector	string	No	CSS selector for another element whose content should be copied.
timeout	integer	No	Duration in milliseconds before the success/error UI resets. Default: 2000.
success_class	string	No	CSS class added to the trigger element when copy is successful. Default: `"clipboard-success"`.
error_class	string	No	CSS class added to the trigger element when copy fails. Default: `"clipboard-error"`.
copy_success_text	string	No	Text displayed in the status element on successful copy. Supports localization.
copy_error_text	string	No	Text displayed in the status element on failed copy. Supports localization.
copy_button_label	string	No	Accessible label for the copy button for screen readers. Defaults to `"Copy to clipboard"`.
copy_button_aria_label	string	No	Optional `aria-label` override for the copy button.
text_description	string	No	Optional description of what's being copied, for better accessibility. Hidden from view but announced by screen readers.
status_class	string	No	Optional CSS classes applied to the clipboard status message element.
:content	slot	No	Optional slot used as fallback content to be copied if `text` or `target_selector` are not provided.
:trigger	slot	Yes	The clickable element that triggers the copy action (e.g. button, icon).
:inner_block	slot	No	Additional content rendered inside the clipboard component wrapper.
:trigger	slot	Yes	The clickable element that triggers the copy action (e.g. a button or an icon). You can visually style this element freely, and it will receive the `success_class` or `error_class` based on the result. To suppress the default feedback text but keep visual state, set `show_status_text=false`.
show_status_text	boolean	No	If set to false, hides the visual clipboard status text while still announcing it to screen readers. Default: true.
dynamic_label	boolean	No	If set to true, the text inside the clipboard label will dynamically change based on the success or failure of the clipboard operation. Default: false.
content_class	string	`block mb-2`	CSS class applied to the container that displays the status message (e.g., `Copied!` or `Copy failed`) after a clipboard operation.

Clipboard CLI Arguments

Name	Type	Options	Recommended?
`--only`	string	clipboard	Yes
`--module`	string	Something	NO