Taiga UI 5.0 is out!

Badge KIT

Examples API GitHub

On this page

See also

BadgedContent, Tag

Component for displaying text, pictures and icons.

Basic

Default
Primary
Accent
Success
Error
Warning
Warning
Neutral
Info

Custom status

Custom

Use CSS for support colors

Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga
Taiga

Sizes

Success
Success
Success
Success 
    
      
    

      
      
    

  
    
      <div tuiBadge>Default</div>
<div
    appearance="primary"
    tuiBadge
>
    Primary
</div>
<div
    appearance="accent"
    tuiBadge
>
    Accent
</div>
<div
    appearance="positive"
    tuiBadge
    tuiStatus
>
    Success
</div>
<div
    appearance="negative"
    tuiBadge
    tuiStatus
>
    Error
</div>
<div
    appearance="warning"
    tuiBadge
    tuiStatus
>
    Warning
</div>
<div
    appearance="warning"
    tuiBadge
>
    Warning
</div>
<div
    appearance="neutral"
    tuiBadge
>
    Neutral
</div>
<div
    appearance="info"
    tuiBadge
>
    Info
</div>

<p>Custom status</p>
<div
    tuiBadge
    tuiStatus="var(--tui-chart-categorical-09)"
    [style.background]="'var(--tui-chart-categorical-01)'"
>
    Custom
</div>

<p>Use CSS for support colors</p>
@for (_ of '-'.repeat(20); track $index) {
    <div
        tuiBadge
        [style.background]="`var(--tui-chart-categorical-${$index.toString().padStart(2, '0')})`"
    >
        Taiga
    </div>
}

<p>Sizes</p>
<div
    appearance="positive"
    size="xl"
    tuiBadge
    tuiStatus
>
    Success
</div>
<div
    appearance="positive"
    size="l"
    tuiBadge
    tuiStatus
>
    Success
</div>
<div
    appearance="positive"
    size="m"
    tuiBadge
    tuiStatus
>
    Success
</div>
<div
    appearance="positive"
    size="s"
    tuiBadge
    tuiStatus
>
    Success
</div>

    

      
      
    

  
    
      [tuiBadge] {
    margin: 0.5rem;
}

Sizes

x-large
large
medium
small 
    
      
    

      
      
    

  
    
      <div
    appearance="primary"
    size="xl"
    tuiBadge
>
    x-large
</div>

<div
    appearance="primary"
    size="l"
    tuiBadge
    class="tui-space_left-1"
>
    large
</div>

<div
    appearance="primary"
    size="m"
    tuiBadge
    class="tui-space_left-1"
>
    medium
</div>

<div
    appearance="primary"
    size="s"
    tuiBadge
    class="tui-space_left-1"
>
    small
</div>

Content type (mobile platform)

Value with icon

x-large
large
medium
small

Icon only

Image

marketmarketmarketmarket
    
      
    

      
      
    

  
    
      <div tuiPlatform="ios">
    <h4 class="tui-space_vertical-1">Value with icon</h4>
    <div
        appearance="primary"
        iconStart="@tui.box"
        size="xl"
        tuiBadge
    >
        x-large
    </div>

    <div
        appearance="primary"
        iconStart="@tui.box"
        size="l"
        tuiBadge
        class="tui-space_left-1"
    >
        large
    </div>

    <div
        appearance="primary"
        iconStart="@tui.box"
        size="m"
        tuiBadge
        class="tui-space_left-1"
    >
        medium
    </div>

    <div
        appearance="primary"
        iconStart="@tui.box"
        size="s"
        tuiBadge
        class="tui-space_left-1"
    >
        small
    </div>
</div>

<div tuiPlatform="ios">
    <h4 class="tui-space_top-3 tui-space_bottom-1">Icon only</h4>
    <tui-icon
        appearance="accent"
        iconStart="@tui.box"
        size="xl"
        tuiBadge
    />

    <tui-icon
        appearance="accent"
        iconStart="@tui.box"
        size="l"
        tuiBadge
        class="tui-space_left-1"
    />

    <tui-icon
        appearance="accent"
        iconStart="@tui.box"
        size="m"
        tuiBadge
        class="tui-space_left-1"
    />

    <tui-icon
        appearance="accent"
        iconStart="@tui.box"
        size="s"
        tuiBadge
        class="tui-space_left-1"
    />
</div>

<div tuiPlatform="ios">
    <h4 class="tui-space_top-3 tui-space_bottom-1">Image</h4>
    <img
        alt="market"
        size="xl"
        src="assets/images/avatar.jpg"
        tuiBadge
    />

    <img
        alt="market"
        size="l"
        src="assets/images/avatar.jpg"
        tuiBadge
        class="tui-space_left-1"
    />

    <img
        alt="market"
        size="m"
        src="assets/images/avatar.jpg"
        tuiBadge
        class="tui-space_left-1"
    />

    <img
        alt="market"
        size="s"
        src="assets/images/avatar.jpg"
        tuiBadge
        class="tui-space_left-1"
    />
</div>

    

      
      
    

  
    
      :host {
    display: block;
    min-inline-size: 18rem;
}

Long value

Very long value in badge
Very long value in badge
    
      
    

      
      
    

  
    
      <div
    appearance="primary"
    size="xl"
    tuiBadge
    class="badge"
>
    <div tuiFade>Very long value in badge</div>
</div>

<div
    appearance="accent"
    iconStart="@tui.box"
    size="l"
    tuiBadge
    class="badge tui-space_top-3"
>
    <div class="t-ellipsis">Very long value in badge</div>
</div>

    

      
      
    

  
    
      .badge {
    max-inline-size: 10rem;
}

.t-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

Customization

10 000 000 $
Taiga 
    
      
    

      
      
    

  
    
      <div
    appearance="custom"
    iconStart="@tui.lock"
    size="xl"
    tuiBadge
    class="custom-1"
>
    10 000 000 $
</div>

<div
    appearance="custom"
    size="xl"
    tuiBadge
    class="custom-2 tui-space_left-3"
>
    Taiga
</div>

    

      
      
    

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

.custom-1 {
    .gradient(#0094cf, #24c0ff);

    box-shadow: var(--tui-shadow-small);
}

.custom-2 {
    .gradient(#c86dd7, #3023ae);
}

Options with DI

10 000 000 $
    
      
    

      
      
    

  
    
      <div tuiBadge>10 000 000 $</div>
GitHub StackBlitz