Taiga UI 5.0 is out!

Copy KIT

GitHub

On this page

This component provides an easy way to copy text content to the clipboard. It displays the content normally and shows a copy button on hover, with visual feedback when content is copied.

Basic

Using component in various scenarios.

Bank account1234 42069237 88884321

Very very long text that is so long it will wrap to the next line

Very very long text that is so long it will overflow and get truncated
    
      
    

      
      
    

  
    
      <p tuiTitle>
    <span tuiSubtitle>Bank account</span>
    <tui-copy>1234 42069237 88884321</tui-copy>
</p>
<p>
    <tui-copy>Very very long text that is so long it will wrap to the next line</tui-copy>
</p>
<tui-copy><span>Very very long text that is so long it will overflow and get truncated</span></tui-copy>

    

      
      
    

  
    
      :host {
    display: block;
    inline-size: 17rem;
}

[tuiSubtitle] {
    color: var(--tui-text-secondary);
}

span {
    display: inline-block;
    max-inline-size: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: text-bottom;
}

Sizes

Using size option for various font size cases.

heading-h1

heading-h2

heading-h3

heading-h4

heading-h5

heading-h6

body-l

body-m

body-s

body-xs

ui-l

ui-m

ui-s

ui-xs 

    
      
    

      
      
    

  
    
      @for (font of fonts | keyvalue: orderBy; track font) {
    <p>
        <tui-copy
            [size]="$index > 5 ? 'm' : 'l'"
            [style.font]="`var(${font.value})`"
            [style.white-space]="'nowrap'"
        >
            {{ font.key }}
        </tui-copy>
    </p>
}

InputCopy

Using tui-icon[tuiCopy] inside a textfield
I
love
Taiga UI 
    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Click icon to copy</label>
    <input
        placeholder="I am placeholder"
        tuiInput
        [(ngModel)]="value"
    />
    <tui-icon tuiCopy />
</tui-textfield>

<tui-textfield
    multi
    [rows]="1"
    [style.margin-block-start.rem]="1"
    [style.max-inline-size.rem]="17"
>
    <input
        tuiInputChip
        [(ngModel)]="multiValue"
    />
    <tui-input-chip *tuiItem />
    <tui-icon tuiCopy />
</tui-textfield>

With CopyProcessor

Dedicated component for copying values inside tooltips
Taiga UI

When you copy, the result will have a space prepended and appended: " Taiga UI " . 

    
      
    

      
      
    

  
    
      <tui-copy [tuiCopyProcessor]="processor">Taiga UI</tui-copy>
<p>
    When you copy, the result will have a space prepended and appended:
    <code>" Taiga UI "</code>
    .
</p>

ButtonCopy

Alexander Inkin

Roman Sedov 

    
      
    

      
      
    

  
    
      <p>
    <span
        tuiHintDirection="top"
        [tuiHint]="inkin"
    >
        Alexander Inkin
    </span>
    <ng-template #inkin>
        <button
            tuiButtonCopy="Alexander Inkin"
            tuiTheme="dark"
        >
            Name
        </button>
        <button
            tuiButtonCopy="@a.inkin"
            tuiTheme="dark"
        >
            Login
        </button>
    </ng-template>
</p>
<p>
    <span
        tuiHintAppearance="floating"
        tuiHintDirection="top"
        [tuiHint]="sedov"
    >
        Roman Sedov
    </span>
    <ng-template #sedov>
        <button tuiButtonCopy="Roman Sedov">Name</button>
        <button tuiButtonCopy="@r.sedov">Login</button>
    </ng-template>
</p>
GitHub StackBlitz