# `LineaUI.Components.Clipboard`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/clipboard.ex#L1)

LineOne's copy to clipboard: a button that copies a text, and a field with a copy button
joined to it.

    <.clipboard value="mix phx.new demo">Copy</.clipboard>
    <.clipboard from="#invite-link" size="xs">Copy</.clipboard>
    <.clipboard_input id="share" value={@url} />

`from` is a selector: a field gives its value, any other element its text. After a copy the
toaster shows `toast` ("Text Copied", in the success color, as LineOne does), the button keeps
`data-copied` for two seconds (style it with `data-copied:`) and `on_copy` runs; a copy that
fails shows `error_toast`. With `on_copy` as an event name the LiveView (or `target`) gets
`handle_event(name, %{"id" => id}, socket)`.

# `clipboard`

A button that copies `value`, or what `from` points at.

Events: `on_copy` pushes `%{"id" => id}` when it is an event name.

## Attributes

* `id` (`:string`) (required) - Needed by the hook.
* `value` (`:string`) - The text to copy. Defaults to `nil`.
* `from` (`:string`) - A selector of the field or element whose text is copied. Defaults to `nil`.
* `toast` (`:any`) - Shown after a copy; `nil` or `""` for none. Defaults to `"Text Copied"`.
* `error_toast` (`:string`) - Defaults to `"Error"`.
* `on_copy` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `target` (`:any`) - Defaults to `nil`.
* `color` (`:string`) - Defaults to `"primary"`. Must be one of `"neutral"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `variant` (`:string`) - Defaults to `"solid"`. Must be one of `"solid"`, `"glow"`, `"outline"`, `"soft"`, `"bordered"`, or `"flat"`.
* `size` (`:string`) - Defaults to `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `clipboard_input`

LineOne's "Advanced Usage": a text field with a copy button joined to its end. The field is a
real input (`name`, `value`, `phx-change` work), and the button copies what it holds.

## Attributes

* `id` (`:string`) (required)
* `name` (`:string`) - Defaults to `nil`.
* `value` (`:string`) - Defaults to `nil`.
* `placeholder` (`:string`) - Defaults to `nil`.
* `label` (`:string`) - The button's text. Defaults to `"Copy"`.
* `toast` (`:any`) - Shown after a copy; `nil` or `""` for none. Defaults to `"Text Copied"`.
* `error_toast` (`:string`) - Defaults to `"Error"`.
* `on_copy` (`:any`) - Defaults to `nil`.
* `target` (`:any`) - Defaults to `nil`.
* `class` (`:any`) - Merged into the wrapper. Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["readonly", "disabled", "phx-debounce", "autocomplete", "form"]`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*