Taiga UI 5.0 is out!

Button CORE

Examples API GitHub

On this page

See also

ButtonGroup, Link
Button is a basic component used for both icon buttons and regular buttons with optional icons on either side. It can be applied to button and a tags. When used as tuiIconButton don't forget to still put text label within the tag for accessibility.

Sizes

Simple buttons with preset size options. 
    
      
    

      
      
    

  
    
      <button
    size="l"
    tuiButton
    type="button"
>
    Large
</button>

<button
    size="m"
    tuiButton
    type="button"
>
    Medium
</button>

<button
    size="s"
    tuiButton
    type="button"
>
    Small
</button>

<button
    size="xs"
    tuiButton
    type="button"
>
    Extra small
</button>

    

      
      
    

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

Appearance

Buttons support all built-in appearances. See Appearance directive for more.
Use tuiAppearanceMode to emulate :checked / :invalid CSS state for outline appearance: 
    
      
    

      
      
    

  
    
      <button
    appearance="primary"
    tuiButton
    type="button"
>
    Primary
</button>

<button
    appearance="accent"
    tuiButton
    type="button"
>
    Accent
</button>

<button
    appearance="secondary"
    tuiButton
    type="button"
>
    Secondary
</button>

<button
    appearance="flat"
    tuiButton
    type="button"
>
    Flat
</button>

<button
    appearance="outline"
    tuiButton
    type="button"
>
    Outline
</button>

<button
    appearance="floating"
    tuiButton
    type="button"
>
    Floating
</button>

<button
    appearance="primary"
    disabled
    tuiButton
    type="button"
>
    Primary disabled
</button>

<div>
    Use
    <code>tuiAppearanceMode</code>
    to emulate
    <code>:checked</code>
    /
    <code>:invalid</code>
    CSS state for outline appearance:
</div>

<button
    appearance="outline"
    tuiAppearanceMode="checked"
    tuiButton
    type="button"
>
    Outline
</button>

<button
    appearance="outline-grayscale"
    tuiAppearanceMode="checked invalid"
    tuiButton
    type="button"
>
    Outline
</button>

    

      
      
    

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

Icons

Using icons and other elements, such as an Avatar inside buttons in a variety of ways. 
    
      
    

      
      
    

  
    
      <button
    appearance="accent"
    tuiButton
    type="button"
>
    <div
        size="xs"
        tuiAvatar="@tui.user"
    >
        <img
            alt=""
            src="https://avatars.githubusercontent.com/u/11832552"
        />
    </div>
    Alex Inkin
</button>

<button
    appearance="secondary"
    size="m"
    tuiButton
    type="button"
>
    <tui-icon icon="@tui.users" />
    Users
</button>

<button
    appearance="outline"
    size="s"
    tuiButton
    tuiChevron
    type="button"
>
    More
</button>

<button
    iconStart="@font.help_outline"
    size="m"
    tuiIconButton
    type="button"
>
    Help
</button>

<button
    appearance="secondary-destructive"
    iconStart="@tui.heart"
    size="xs"
    tuiIconButton
    type="button"
    [style.border-radius.%]="100"
>
    Favorite
</button>

    

      
      
    

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

    --tui-font-icon: 'Material Symbols Outlined';
}

Loading

Buttons can show a loading indicator when performing an action. Dedicated TuiButtonLoading component helps with accessibility by keeping button focusable while preventing click events. 
    
      
    

      
      
    

  
    
      <button
    iconStart="@tui.clock"
    tuiButton
    type="button"
    [loading]="loading$ | async"
    (click)="trigger$.next()"
>
    Click to start
</button>

Options with DI

Default values for buttons can be configured using DI options. 
    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
>
    Options with DI
</button>

Vertical

Use tuiButtonVertical attribute to set different layout. 
    
      
    

      
      
    

  
    
      <button
    tuiButton
    tuiButtonVertical
    type="button"
>
    <div
        size="xs"
        tuiAvatar="@tui.user"
    >
        <img
            alt=""
            src="https://avatars.githubusercontent.com/u/11832552"
        />
    </div>
    Alex
</button>

<button
    appearance="secondary"
    iconStart="@tui.users"
    tuiButton
    tuiButtonVertical
    type="button"
>
    Users
</button>

<button
    appearance="flat"
    iconStart="@tui.star"
    tuiButton
    tuiButtonVertical
    type="button"
>
    <div
        tuiFade
        tuiFadeHeight="1rem"
        tuiFadeOffset="0.5rem"
    >
        Very long label with fade
    </div>
</button>

Two labels

Nested elements with a little bit of CSS can make button appear to have sections. 

    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    class="button"
>
    <span tuiFade>Purchase gift certificate</span>
    <strong>$500</strong>
</button>
<p>
    <button
        tuiButton
        type="button"
        class="button"
    >
        <span tuiFade>Purchase</span>
        <strong>$500</strong>
    </button>
</p>

    

      
      
    

  
    
      .button {
    inline-size: 15rem;
    justify-content: space-between;
}
GitHub StackBlitz