Taiga UI 5.0 is out!

Segmented KIT

GitHub

On this page

Segmented is used for links and buttons to navigate within the application. It can also work as a radio button to toggle between different states.

Sizes 

    
      
    

      
      
    

  
    
      @for (size of sizes; track size) {
    <tui-segmented [size]="size">
        <button type="button">
            <tui-icon icon="@tui.sun" />
            All
            <tui-badge-notification [size]="size">3</tui-badge-notification>
            <tui-icon icon="@tui.moon" />
        </button>
        <button type="button">Incoming</button>
        <button type="button">Outgoing</button>
    </tui-segmented>
}

    

      
      
    

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

Width 

    
      
    

      
      
    

  
    
      <tui-segmented>
    <button type="button">Dynamic width</button>
    <button type="button">Items</button>
</tui-segmented>

<tui-segmented class="full">
    <button type="button">Fixed width</button>
    <button type="button">
        <span tuiFade>With fadeout overflow effect</span>
    </button>
</tui-segmented>

    

      
      
    

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

.full {
    inline-size: 100%;

    & > * {
        flex: 1;
        min-inline-size: 0;
    }
}

Customization 

    
      
    

      
      
    

  
    
      <header>
    <tui-segmented
        class="colors"
        [(activeItemIndex)]="active"
    >
        @for (button of buttons; track button) {
            <button
                type="button"
                [class.active]="$index === active"
            >
                {{ button }}
            </button>
        }
    </tui-segmented>
</header>

<tui-segmented [style.border-radius.rem]="10">
    <button type="button">Border radius</button>
    <button type="button">Can be</button>
    <button type="button">Customized</button>
</tui-segmented>

<tui-segmented
    [style.flex-direction]="'column'"
    [style.font-weight]="'bold'"
>
    <button type="button">Fonts</button>
    <button type="button">Can also be</button>
    <button type="button">Overridden</button>
</tui-segmented>

    

      
      
    

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

header {
    background: var(--tui-background-base-alt);
    box-shadow: 0 -10rem 0 10.5rem var(--tui-background-base-alt);
}

.colors {
    background: var(--tui-background-base);

    &::before {
        color: var(--tui-text-action);
        box-shadow: none;
    }

    .active {
        color: #fff;
    }
}

Content

Buttons
Links Use routerLink And routerLinkActive To work with links
Icons
Control
    
      
    

      
      
    

  
    
      <strong>Buttons</strong>
<tui-segmented>
    <button type="button">Buttons</button>
    <button type="button">Can be</button>
    <button type="button">Used</button>
</tui-segmented>
<hr />
<strong>Links</strong>
<tui-segmented>
    <a
        routerLinkActive
        [routerLink]="routes.Link"
    >
        Use routerLink
    </a>
    <a
        routerLinkActive
        [routerLink]="routes.Segmented"
        [routerLinkActiveOptions]="options"
    >
        And routerLinkActive
    </a>
    <a
        fragment="content"
        routerLinkActive
        [routerLink]="routes.Segmented"
        [routerLinkActiveOptions]="options"
    >
        To work with links
    </a>
</tui-segmented>
<hr />
<strong>Icons</strong>
<tui-segmented>
    <button
        title="light"
        type="button"
    >
        <tui-icon icon="@tui.sun" />
    </button>
    <button
        title="dark"
        type="button"
    >
        <tui-icon icon="@tui.moon" />
    </button>
</tui-segmented>
<hr />
<strong>Control</strong>
<tui-segmented>
    <label>
        <input
            name="radio"
            type="radio"
            value="a"
            [(ngModel)]="selected"
        />
        Use radio inside
    </label>
    <label>
        <input
            name="radio"
            type="radio"
            value="b"
            [(ngModel)]="selected"
        />
        It would be hidden
    </label>
    <label>
        <input
            name="radio"
            type="radio"
            value="c"
            [(ngModel)]="selected"
        />
        Automatically
    </label>
</tui-segmented>
<button
    appearance="floating"
    size="s"
    tuiButton
    type="button"
    (click)="selected = 'b'"
>
    Select second option
</button>

    

      
      
    

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

hr {
    inline-size: 100%;
    block-size: 1px;
    background: var(--tui-border-normal);
    border: 0;
}
GitHub StackBlitz