Taiga UI 5.0 is out!

Message KIT

Examples API GitHub

On this page

Message component is used to display message block.

Basic

Incoming message Outgoing message 
    
      
    

      
      
    

  
    
      <span tuiMessage>Incoming message</span>
<span
    appearance="accent"
    tuiMessage
>
    Outgoing message
</span>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

Custom color

I'm default 🤘And I'm colored 🤘🏿
    
      
    

      
      
    

  
    
      <span class="container incoming">
    <span tuiMessage>
        <span>I'm default 🤘</span>
    </span>
</span>

<span class="container outgoing">
    <span
        appearance="custom"
        tuiMessage
    >
        <span>And I'm colored 🤘🏿</span>
    </span>
</span>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

[tuiAppearance][data-appearance='custom'] {
    background: rgba(175, 242, 24, 1);
}

.container {
    display: flex;
    inline-size: 100%;
}

.incoming {
    justify-content: flex-start;
}

.outgoing {
    justify-content: flex-end;
}

With link

All relevant guides in this  project  with a lot of examples 
    
      
    

      
      
    

  
    
      <span tuiMessage>
    All relevant guides in this&nbsp;
    <a
        href="#"
        tuiLink
    >
        project
    </a>
    &nbsp;with a lot of examples
</span>

Chat messages

Fade

Left Comment with very long contentRight Comment with very long content

Multiline

Very long content that goes on the second lineVery long content that goes on the second line
    
      
    

      
      
    

  
    
      <h3>Fade</h3>

<span class="container incoming">
    <span
        tuiMessage
        class="fade"
    >
        <span tuiFade>Left Comment with very long content</span>
    </span>
</span>

<span class="container outgoing">
    <span
        appearance="accent"
        tuiMessage
        class="fade"
    >
        <span tuiFade>Right Comment with very long content</span>
    </span>
</span>

<h3>Multiline</h3>

<span class="container incoming">
    <span tuiMessage>
        <span class="multiline">Very long content that goes on the second line</span>
    </span>
</span>

<span class="container outgoing">
    <span
        appearance="accent"
        tuiMessage
    >
        <span class="multiline">Very long content that goes on the second line</span>
    </span>
</span>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.fade {
    max-inline-size: 11rem;
}

.multiline {
    white-space: initial;
}

.container {
    display: flex;
    inline-size: 100%;
}

.incoming {
    justify-content: flex-start;

    > [tuiMessage] {
        margin-inline-start: 1rem;
        margin-inline-end: 2rem;
    }
}

.outgoing {
    justify-content: flex-end;

    > [tuiMessage] {
        margin-inline-start: 2rem;
        margin-inline-end: 1rem;
    }
}

Inside cells

Alexander I.
USD
Don't deny yourself anything
+ $123 456
June 2
German P.
USD
– $10 000
September 6
For game 
    
      
    

      
      
    

  
    
      <div tuiCell>
    <div
        tuiAccessories
        tuiAvatar="@tui.user"
    >
        <img
            alt=""
            src="assets/images/avatar.jpg"
        />
    </div>
    <div tuiTitle>
        Alexander I.
        <div tuiSubtitle>USD</div>
        <span tuiMessage>Don't deny yourself anything</span>
    </div>
    <div
        tuiAccessories
        tuiTitle
        [style.overflow]="'visible'"
        [style.white-space]="'nowrap'"
        [style.width]="0"
    >
        + $123 456
        <div tuiSubtitle>June 2</div>
    </div>
</div>

<div tuiCell>
    <div
        tuiAccessories
        tuiAvatar="@tui.user"
    >
        <img
            alt=""
            src="https://avatars.githubusercontent.com/u/87331898"
        />
    </div>
    <div
        tuiAccessories
        tuiTitle
    >
        German P.
        <div tuiSubtitle>USD</div>
    </div>
    <div tuiTitle>
        – $10 000
        <div tuiSubtitle>September 6</div>
        <span
            appearance="accent"
            tuiMessage
        >
            For game
        </span>
    </div>
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[tuiCell] {
    max-inline-size: 25rem;
}
GitHub StackBlitz