Clipboard

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..

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

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>

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.

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

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

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>

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">
  Mishka Chelekom is a set of Phoenix LiveView components for any project
  <.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> Copy the install command to add any Chelekom component to your app
</p>

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>

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>

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>

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>

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>

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.

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

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>

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>

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>

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>

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.

<.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>