Taiga UI 5.0 is out!

Appearance CORE

Examples API GitHub

On this page

A directive for visual presets of interactive components

Basic

Interactive elements react to pointer natively but you can override state with inputs
Non-interactive elements do not react to pointer 
    
      
    

      
      
    

  
    
      <div
    tuiAppearance="secondary"
    type="button"
>
    Non-interactive elements do not react to pointer
</div>

<button
    tuiAppearance="secondary"
    type="button"
>
    Hovered state is only triggered on devices with pointer
</button>

<button
    tuiAppearance="secondary"
    tuiDropdown="Button looks hovered when dropdown is open"
    type="button"
    [tuiAppearanceState]="open ? 'hover' : null"
    [(tuiDropdownOpen)]="open"
>
    Triggering state manually
</button>

    

      
      
    

  
    
      :host {
    display: grid;
    grid-auto-rows: 3rem;
    gap: 1rem;
    text-align: center;
}

div {
    padding: 0.25rem 2rem;
}

button {
    border: none;
    inline-size: 100%;
    block-size: 100%;
}

Custom

Use LESS or SCSS mixins to create your own appearances in global styles 
    
      
    

      
      
    

  
    
      <button
    tuiAppearance="acid"
    type="button"
>
    SCSS mixins have the same names
</button>

    

      
      
    

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

button {
    border: none;
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

[tuiAppearance][data-appearance='acid'] {
    color: var(--tui-chart-categorical-06);
    background: var(--tui-chart-categorical-09);

    --tui-border-focus: var(--tui-chart-categorical-06);

    .appearance-hover({
        color: var(--tui-chart-categorical-09);
        background: var(--tui-chart-categorical-14);
    });

    .appearance-active({
        color: var(--tui-chart-categorical-08);
        background: var(--tui-chart-categorical-10);
    });
}

Checkbox

You can use it on input[type="checkbox"] to create a custom toggle component easily 
    
      
    

      
      
    

  
    
      <input
    tuiAppearance="secondary"
    type="checkbox"
    class="like"
/>

    

      
      
    

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

.like {
    inline-size: var(--tui-height-m);
    block-size: var(--tui-height-m);
    border-radius: 100%;
    cursor: pointer;

    &::before {
        .fullsize();

        content: '';
        background: currentColor;
        mask: url('/assets/taiga-ui/icons/heart.svg') no-repeat center / 3em 1.5em;
    }

    &:checked::before {
        color: var(--tui-text-negative);
        mask: url('/assets/taiga-ui/icons/heart-filled.svg') no-repeat center;
    }
}

Bundled

You can create your own appearances or use one of the bundled options

Primary

Secondary

Flat

Outline

Action

Status

Others

    
      
    

      
      
    

  
    
      @for (group of appearances | keyvalue: asIs; track group) {
    <h3>{{ group.key }}</h3>
    <section class="section">
        @for (appearance of group.value; track appearance) {
            <button
                iconStart="@tui.star"
                tuiButton
                type="button"
                [appearance]="appearance"
                [cdkCopyToClipboard]="appearance"
                (cdkCopyToClipboardCopied)="$event && onCopy(appearance)"
            >
                {{ appearance }}
            </button>
        }
    </section>
}

    

      
      
    

  
    
      .section {
    display: flex;
    gap: 1rem;
}
GitHub StackBlitz