Taiga UI 5.0 is out!

BadgedContent KIT

Examples API GitHub

On this page

See also

Badge, Tag

BadgedContent is a wrapper for other components to add badges and notifications to them.

Basic

99
120
99 
    
      
    

      
      
    

  
    
      <tui-badged-content>
    <tui-badge-notification
        size="s"
        tuiSlot="top"
    >
        99
    </tui-badge-notification>
    <div
        size="s"
        tuiAvatar="@tui.user"
        [round]="false"
    ></div>
</tui-badged-content>

<tui-badged-content>
    <div
        size="m"
        tuiAvatar="@tui.user"
        [round]="false"
    ></div>
    <tui-badge-notification
        size="m"
        tuiSlot="bottom"
    >
        120
    </tui-badge-notification>
</tui-badged-content>

<tui-badged-content>
    <tui-icon
        appearance="primary"
        iconStart="@tui.star"
        size="l"
        tuiBadge
        tuiSlot="top"
    />
    <div
        size="l"
        tuiAvatar="@tui.user"
        [round]="false"
    ></div>
</tui-badged-content>

<tui-badged-content>
    <tui-badge-notification
        size="l"
        tuiSlot="top"
    >
        99
    </tui-badge-notification>
    <div
        size="xl"
        tuiAvatar="@tui.user"
        [round]="false"
    ></div>
    <tui-icon
        appearance="accent"
        iconStart="@tui.star"
        size="l"
        tuiBadge
        tuiSlot="bottom"
    />
</tui-badged-content>

    

      
      
    

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

Rounded content

The wrapped element is assumed to have 12px border-radius. If it is different, override the --tui-radius variable with actual value.

8
Taiga
99 
    
      
    

      
      
    

  
    
      <tui-badged-content [style.--tui-radius.%]="50">
    <tui-badge-notification
        size="s"
        tuiSlot="top"
    >
        8
    </tui-badge-notification>
    <div
        size="s"
        tuiAvatar="@tui.user"
    ></div>
</tui-badged-content>

<tui-badged-content [style.--tui-radius.%]="50">
    <tui-icon
        appearance="accent"
        iconStart="@tui.star"
        size="m"
        tuiBadge
        tuiSlot="bottom"
    />
    <div
        size="m"
        tuiAvatar="@tui.user"
    ></div>
</tui-badged-content>

<tui-badged-content [style.--tui-radius.%]="50">
    <span
        appearance="accent"
        size="l"
        tuiBadge
        tuiSlot="top"
    >
        Taiga
    </span>
    <div
        size="l"
        tuiAvatar="@tui.user"
    ></div>
</tui-badged-content>

<tui-badged-content [style.--tui-radius.%]="50">
    <tui-badge-notification
        size="l"
        tuiSlot="top"
    >
        99
    </tui-badge-notification>
    <div
        size="xl"
        tuiAvatar="@tui.user"
    ></div>
</tui-badged-content>

    

      
      
    

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

With different components 

    
      
    

      
      
    

  
    
      <tui-badged-content>
    <tui-badge-notification
        size="xs"
        tuiSlot="top"
    />
    <tui-textfield class="input">
        <input tuiInput />
        <label tuiLabel>Input text</label>
    </tui-textfield>
</tui-badged-content>

<tui-badged-content>
    <tui-icon
        appearance="accent"
        iconStart="@tui.check"
        size="s"
        tuiBadge
        tuiSlot="bottom"
    />
    <button
        tuiButton
        type="button"
    >
        Button
    </button>
</tui-badged-content>

    

      
      
    

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

tui-textfield {
    min-inline-size: 10rem;
}

With image

icon
icon
    
      
    

      
      
    

  
    
      <tui-badged-content>
    <img
        alt="icon"
        src="assets/images/angular.svg"
        tuiSlot="top"
        width="24"
    />
    <div
        tuiAvatar="@tui.user"
        [round]="false"
    ></div>
</tui-badged-content>

<tui-badged-content>
    <img
        alt="icon"
        src="assets/images/angular.svg"
        tuiSlot="bottom"
        width="24"
    />
    <div
        tuiAvatar="@tui.user"
        [round]="false"
    ></div>
</tui-badged-content>

    

      
      
    

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