Catalog Foundations

<.copy>

ConnieUI.Foundations

K7P2-QX9M
HEEx 
<ConnieUI.Foundations.copy value="K7P2-QX9M" class="inline-flex items-center gap-2">
  <span class="font-mono text-sm text-primary">K7P2-QX9M</span>
  <ConnieUI.Buttons.button
    size="sm"
    color="link-gray"
    icon_start="icon-copy-01"
    aria_label="Copy token"
    click={JS.dispatch("cui:copy")}
  />
</ConnieUI.Foundations.copy>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string

what is copied

:string
:string
:string
:string

keeps every click inside from reaching the page around it

Set by the example

class

Docs

Copies `value` to the clipboard when something inside asks, and says how it went through the page's `ConnieUI.Notifications.notifier/1`. Something asks by being clicked while it carries `data-copy`, or by dispatching `cui:copy` from inside, which is how a `ConnieUI.Buttons` button asks since it takes no data attributes: <ConnieUI.Foundations.copy value={@token}> <code>{@token}</code> <button type="button" data-copy aria-label="Copy token">…</button> </ConnieUI.Foundations.copy> <ConnieUI.Foundations.copy value={@token} class="inline-flex items-center gap-2"> {@token} <ConnieUI.Buttons.button color="link-gray" icon_start="icon-copy-01" aria_label="Copy token" click={JS.dispatch("cui:copy")} /> </ConnieUI.Foundations.copy> The request stops at the element, so copying from inside a clickable row does not also open the row. `contain` stops every click inside, for content such as a link that would otherwise reach the row too.
Attribute Type Default Description
value * :string
what is copied
copied_title :string "Copied"
copied_message :string "Value copied to clipboard"
failed_title :string "Copy failed"
failed_message :string "Failed to copy to clipboard"
contain :boolean false
keeps every click inside from reaching the page around it
class :any nil
rest :global
Slot Slot attributes Description
inner_block *