Taiga UI 5.0 is out!

ButtonGroup KIT

GitHub

On this page

See also

Button, Link

Elevated 

    
      
    

      
      
    

  
    
      <div
    tuiAppearance="floating"
    tuiButtonGroup
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Create a payment
    </button>

    <button type="button">
        <tui-icon
            badge=""
            icon="@tui.circle-plus"
        />
        Pay the bill
    </button>

    <button type="button">
        <tui-icon
            badge="@tui.lock"
            icon="@tui.circle-plus"
            class="custom"
        />
        Remove from favorites
    </button>
</div>

<div
    tuiAppearance="floating"
    tuiButtonGroup
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Top up
    </button>

    <button type="button">
        <tui-icon icon="@tui.circle-arrow-right" />
        Take out
    </button>
</div>

<div
    tuiAppearance="floating"
    tuiButtonGroup
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        To repay
    </button>
</div>

    

      
      
    

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

:host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: 21.5625rem;

    @media @tui-mobile {
        inline-size: 100%;
    }
}

.custom {
    color: var(--tui-status-warning);

    &::after {
        color: var(--tui-text-action);
    }
}

Flat 

    
      
    

      
      
    

  
    
      <div
    tuiAppearance="secondary"
    tuiButtonGroup
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Create a payment
    </button>

    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Pay the bill
    </button>

    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Remove from favorites
    </button>
</div>

<div
    tuiAppearance="secondary"
    tuiButtonGroup
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Top up
    </button>

    <button type="button">
        <tui-icon icon="@tui.circle-arrow-right" />
        Take out
    </button>
</div>

<div
    tuiAppearance="secondary"
    tuiButtonGroup
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        To repay
    </button>
</div>

    

      
      
    

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

:host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: 21.5625rem;

    @media @tui-mobile {
        inline-size: 100%;
    }
}

Dark 

    
      
    

      
      
    

  
    
      <div
    tuiButtonGroup
    tuiTheme="dark"
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Create a payment
    </button>

    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Pay the bill
    </button>

    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Remove from favorites
    </button>
</div>

<div
    tuiButtonGroup
    tuiTheme="dark"
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        Top up
    </button>

    <button type="button">
        <tui-icon icon="@tui.circle-arrow-right" />
        Take out
    </button>
</div>

<div
    tuiButtonGroup
    tuiTheme="dark"
>
    <button type="button">
        <tui-icon icon="@tui.circle-plus" />
        To repay
    </button>
</div>

    

      
      
    

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

:host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: 21.5625rem;

    @media @tui-mobile {
        inline-size: 100%;
    }
}

[tuiButtonGroup] {
    background: linear-gradient(334.83deg, #7d8ca0 0%, #647382 100%);

    button {
        color: #fff;
    }
}

Swiped animation

BANK RUB Account

10 000 ₽

BANK USD Account

2 000 000 $

BANK EUR Account

30 000 € 
    
      
    

      
      
    

  
    
      <tui-carousel
    [max]="2"
    [min]="0"
    [(index)]="index"
    (scroll)="onScroll($any($event.target))"
>
    <div
        *tuiItem="let index"
        tuiCardMedium
        tuiTheme="dark"
        [style.background]="items[index]?.gradient"
    >
        <h2 tuiTitle>
            BANK
            <span tuiSubtitle>{{ items[index]?.title }}</span>
        </h2>
        <div tuiBadge>
            <tui-icon icon="@tui.wallet" />
            {{ items[index]?.content }}
        </div>
    </div>
</tui-carousel>

<tui-pager
    [count]="items.length"
    [index]="effective()"
/>

<div
    tuiButtonGroup
    tuiTheme="dark"
    [style.background-color]="items[effective()]?.color"
>
    <tui-elastic-container [style.opacity]="opacity() * 2">
        @switch (effective()) {
            @case (0) {
                <button type="button">
                    <tui-icon icon="@tui.circle-plus" />
                    Create a payment
                </button>
                <button type="button">
                    <tui-icon icon="@tui.circle-plus" />
                    Pay the bill
                </button>
                <button type="button">
                    <tui-icon icon="@tui.circle-plus" />
                    Remove from favorites
                </button>
            }
            @case (1) {
                <button type="button">
                    <tui-icon icon="@tui.circle-plus" />
                    Remove from favorites
                </button>
            }
            @case (2) {
                <button type="button">
                    <tui-icon icon="@tui.circle-plus" />
                    Create a payment
                </button>
                <button type="button">
                    <tui-icon icon="@tui.circle-plus" />
                    Remove from favorites
                </button>
            }
        }
    </tui-elastic-container>
</div>

    

      
      
    

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

:host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: 21rem;
    block-size: 21rem;

    @media @tui-mobile {
        inline-size: 100%;
    }
}

[tuiButtonGroup] button {
    color: var(--tui-text-primary);
}

[tuiCardMedium] {
    inline-size: calc(100% - 3rem);
    padding: 0.75rem;
    block-size: 8rem;
    color: var(--tui-text-primary);
}

tui-pager {
    margin-inline: auto;
}

[tuiBadge] {
    background: #ffdd2d;
    color: #333;
}
GitHub StackBlitz