Taiga UI 5.0 is out!

Pin KIT

GitHub

On this page

Pins are used to show a location on a 2D plane. Use color , background , border and box-shadow to customize the pin

Pins are designed to be absolutely positioned on map or similar medium, therefore specifically their center is placed where you put them.

Default

avatar
4.5 
    
      
    

      
      
    

  
    
      <div tuiPin>
    <img
        alt="avatar"
        src="assets/images/avatar.jpg"
    />
</div>

<div tuiPin>
    <tui-icon icon="@tui.dollar-sign" />
</div>

<div
    tuiPin
    class="white"
>
    <tui-icon icon="@tui.dollar-sign" />
</div>

<div
    tuiPin
    class="white"
>
    4.5
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 2rem;
    background: var(--tui-background-base-alt);
    box-shadow: 0 0 0 2rem var(--tui-background-base-alt);
    padding: 1rem 0 0 1rem;
    margin-block-end: -1rem;
}

.white {
    background: var(--tui-background-base);
    color: var(--tui-background-accent-2);
    border-width: 0.125rem;
}

Dot 

    
      
    

      
      
    

  
    
      <div
    tuiPin
    class="blue"
></div>
<div
    tuiPin
    class="yellow"
></div>
<div
    tuiPin
    class="green"
></div>
<div
    tuiPin
    class="red"
></div>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 2rem;
    background: var(--tui-background-base-alt);
    box-shadow: 0 0 0 2rem var(--tui-background-base-alt);
    padding: 0.375rem 0 0 0.375rem;
    margin-block-end: -0.375rem;
}

.blue {
    background: #428bf9;
}

.yellow {
    background: #ffdd2d;
}

.green {
    background: #00b92d;
}

.red {
    background: #f52222;
}

Openable 

    
      
    

      
      
    

  
    
      <button
    type="button"
    [tuiPin]="a"
    (click)="a = !a"
>
    <img
        alt="avatar"
        src="assets/images/avatar.jpg"
    />
</button>

<button
    title="dollar"
    type="button"
    [style.inset-inline-start.rem]="5"
    [tuiPin]="b"
    (click)="b = !b"
>
    <tui-icon icon="@tui.dollar-sign" />
</button>

<button
    title="dollar"
    type="button"
    class="link"
    [style.inset-inline-start.rem]="10"
    [tuiPin]="c"
    (click)="c = !c"
>
    <tui-icon icon="@tui.dollar-sign" />
</button>

<button
    type="button"
    class="crazy"
    [style.inset-inline-start.rem]="15"
    [tuiPin]="d"
    (click)="d = !d"
>
    4.5
</button>

    

      
      
    

  
    
      :host {
    position: relative;
    display: block;
    block-size: 5rem;
    border-inline-start: 2rem solid transparent;
    background: var(--tui-background-base-alt);
    box-shadow: 0 0 0 2rem var(--tui-background-base-alt);
}

[tuiPin] {
    position: absolute;
    inset-block-start: 4rem;
}

.link {
    border: 0.125rem solid var(--tui-text-action);
    color: var(--tui-text-action);
    background: var(--tui-background-base);
}

.crazy {
    background: #ff9bda;
    color: #0075ff;
    border-color: #7b439e;
    box-shadow: 0 0 0 0.125rem #b286ff;
}
GitHub StackBlitz