Output

Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element.

Class	Type
`interactive-text-output`	Output	A class representing an interactive text output

Components

Interactive text output contains buttons:

Class	Type
`interactive-text-output-buttons`	Button/s Wrapper
`interactive-text-output-button`	Button	Buttons can be hidden (will appear on hover) or displayed next to the content.

visible text

••••••


      <div class="interactive-text-output">

        <span class="text u-break-word">visible text</span>

        <div class="interactive-text-output-buttons">

          <button class="interactive-text-output-button is-hidden" aria-label="copy text">

            <span class="icon-duplicate" aria-hidden="true"></span>

          </button>

        </div>

      </div>

      <div class="interactive-text-output">

        <span class="text">••••••</span>

        <div class="interactive-text-output-buttons">

          <button class="interactive-text-output-button" aria-label="show hidden text">

            <span class="icon-eye" aria-hidden="true"></span>

          </button>

          <button class="interactive-text-output-button" aria-label="copy text">

            <span class="icon-duplicate" aria-hidden="true"></span>

          </button>

        </div>

      </div>

Buttons On Top

This is the visible text which is very long


      <div class="interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200">

        <span class="text u-trim-start">This is the visible text which is very long</span>

        <div class="interactive-text-output-buttons">

          <button class="interactive-text-output-button is-hidden" aria-label="copy text">

            <span class="icon-duplicate" aria-hidden="true"></span>

          </button>

        </div>

      </div>

The following style can be applied to textareas using the is-textarea class:

13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi


      <div class="interactive-text-output is-textarea">

        <span class="text u-line-height-1-5 u-break-word">

          <p class="text u-margin-block-start-8">

            13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73

            c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi

            13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi

          </p>

        </span>

        <div class="interactive-text-output-buttons">

          <button class="interactive-text-output-button" aria-label="copy text">

            <span class="icon-duplicate" aria-hidden="true"></span>

          </button>

        </div>

      </div>