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