ConsulCopyButton

Button component used for copy-to-clipboard functionality so the user can easily copy specified text to their clipboard, along with tooltip-like notifications so the user has some sort of feedback to know the value has been copied.

This component is essentially a composition of our {{with-copyable}} modifier, the {{hds-tooltip}} modifier, plus specific Consul-flavored visual treatment. This is all glued together with our <StateChart /> component to manage states.

Can be used inline to render only a small icon for the button with no other text.

<figure>
  <figcaption>Icon only</figcaption>

  <ConsulCopyButton
    @value={{'stringToCopy'}}
    @name="Thing"
  />

</figure>

<figure>
  <figcaption>Icon and text</figcaption>

  <ConsulCopyButton
    @value={{'stringToCopy'}}
    @name="Thing"
  >
    Copy me!
  </ConsulCopyButton>
</figure>

Arguments

See

• Component Source Code
• Template Source Code