Web Components Button Group Overview

The Web Components Button Group component is used to organize IgcToggleButtonComponent's into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

Web Components Button Example

import {
    defineComponents,
    IgcButtonGroupComponent,
    IgcIconComponent,
    IgcRippleComponent,
    registerIconFromText
} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/material.css';
import './index.css';

defineComponents(IgcButtonGroupComponent, IgcRippleComponent, IgcIconComponent);

const icons = [
    {
        name: 'format_align_left',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"/></svg>',
    },
    {
        name: 'format_align_center',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg>',
    },
    {
        name: 'format_align_right',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"/></svg>',
    },
    {
        name: 'format_align_justify',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"/></svg>',
    },
];

export class ButtonGroupOverview {
    constructor() {
        icons.forEach((icon) => {
            registerIconFromText(icon.name, icon.iconText, 'material');
        });
    }
}

new ButtonGroupOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Button Group Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-button-group>
          <igc-toggle-button value="left">
            <igc-icon name="format_align_left" collection="material"></igc-icon>
            <igc-ripple></igc-ripple>
          </igc-toggle-button>

          <igc-toggle-button value="center">
            <igc-icon name="format_align_center" collection="material"></igc-icon>
            <igc-ripple></igc-ripple>
          </igc-toggle-button>

          <igc-toggle-button value="right">
            <igc-icon name="format_align_right" collection="material"></igc-icon>
            <igc-ripple></igc-ripple>
          </igc-toggle-button>

          <igc-toggle-button value="justify" selected>
            <igc-icon name="format_align_justify" collection="material"></igc-icon>
            <igc-ripple></igc-ripple>
          </igc-toggle-button>
        </igc-button-group>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-button-group {
    max-width: 400px;
}

igc-ripple {
    --color: gray;
}css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

You will then need to import the IgcButtonGroupComponent, its necessary CSS, and register its module, like so:

import { defineComponents, IgcButtonGroupComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonGroupComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

Now that you have the Ignite UI for Web Components Button Group imported, you can start with a basic configuration of the IgcButtonGroupComponent and its buttons.

Use the IgcButtonGroupComponent selector to wrap your IgcToggleButtonComponents and display them into a button group. If you want a button to be selected by default, use the selected attribute:

 <igc-button-group>
    <igc-toggle-button value="left">
        <igc-icon name="format_align_left" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="center">
        <igc-icon name="format_align_center" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="right">
        <igc-icon name="format_align_right" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="justify" selected>
        <igc-icon name="format_align_justify" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>
</igc-button-group>
html

Examples

Alignment

Use the alignment property to set the orientation of the buttons in the button group.

import { defineComponents, IgcButtonGroupComponent, IgcRippleComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/material.css';
import './index.css';

defineComponents(IgcButtonGroupComponent, IgcRippleComponent);
export class ButtonGroupAlignment {
    constructor() {
    }
}

new ButtonGroupAlignment();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Button Group Alignment</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-button-group alignment="vertical">
          <igc-toggle-button value="sofia">
            <igc-ripple></igc-ripple>
            Sofia
          </igc-toggle-button>
          <igc-toggle-button value="london">
            <igc-ripple></igc-ripple>
            London
          </igc-toggle-button>
          <igc-toggle-button value="new york" selected>
            <igc-ripple></igc-ripple>
            New York
          </igc-toggle-button>
          <igc-toggle-button value="tokyo">
            <igc-ripple></igc-ripple>
            Tokyo
          </igc-toggle-button>
        </igc-button-group>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-button-group {
    width: 200px;
}

igc-ripple {
    --color: gray;
}css

Selection

In order to configure the Ignite UI for Web Components IgcButtonGroupComponent selection, you could use its selection property. This property accepts the following three modes:

single - default selection mode of the button group. A single button can be selected/deselected by the user.
single-required - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction.
multiple - multiple buttons in the group can be selected and deselected.

The sample below demonstrates the exposed IgcButtonGroupComponent selection modes:

import {
    defineComponents,
    IgcButtonGroupComponent,
    IgcIconComponent,
    IgcRadioComponent,
    IgcRadioGroupComponent,
    IgcRippleComponent,
    registerIconFromText
} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/material.css';
import './index.css';

defineComponents(IgcButtonGroupComponent, IgcRippleComponent, IgcIconComponent, IgcRadioGroupComponent);

const icons = [
    {
        name: 'bold',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg>',
    },
    {
        name: 'italic',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/></svg>',
    },
    {
        name: 'underlined',
        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/></svg>',
    },
];

export class ButtonGroupSelection {
    private buttonGroup: IgcButtonGroupComponent;

    constructor() {
        icons.forEach((icon) => {
            registerIconFromText(icon.name, icon.iconText, 'material');
        });

        this.buttonGroup = document.querySelector('igc-button-group') as IgcButtonGroupComponent;

        document.addEventListener("igcChange", (e) => {
            const radio = e.target as IgcRadioComponent;

            this.buttonGroup.selection = radio.value as 'single' | 'single-required' | 'multiple';
        });
    }
}

new ButtonGroupSelection();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Button Group Selection</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div class="radio-group-container">
          <label>Selection Mode</label>
          <igc-radio-group alignment="horizontal">
            <igc-radio name="mode" value="single" checked>Single</igc-radio>
            <igc-radio name="mode" value="single-required">Single-Required</igc-radio>
            <igc-radio name="mode" value="multiple">Multiple</igc-radio>
          </igc-radio-group>
        </div>
        <igc-button-group>
          <igc-toggle-button value="bold">
            <igc-icon name="bold" collection="material"></igc-icon>
            <igc-ripple></igc-ripple>
          </igc-toggle-button>

          <igc-toggle-button value="italic">
            <igc-icon name="italic" collection="material"></igc-icon>
            <igc-ripple></igc-ripple>
          </igc-toggle-button>

          <igc-toggle-button value="underlined">
            <igc-icon name="underlined" collection="material"></igc-icon>
            <igc-ripple></igc-ripple>
          </igc-toggle-button>
        </igc-button-group>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.radio-group-container {
    width: 400px;
    margin-bottom: 1rem;
}

igc-radio-group {
    padding: 0.5rem;
}

igc-button-group {
    width: 200px;
}

igc-ripple {
    --color: gray;
}css

A IgcToggleButtonComponent could be marked as selected via its selected attribute or through the IgcButtonGroupComponent selectedItems attribute:

<igc-button-group selected-items='["bold"]'>
    <igc-toggle-button value="bold">
        <igc-icon name="bold" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="italic">
        <igc-icon name="italic" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>

    <igc-toggle-button value="underlined">
        <igc-icon name="underlined" collection="material"></igc-icon>
        <igc-ripple></igc-ripple>
    </igc-toggle-button>
</igc-button-group>
html

Setting IgcToggleButtonComponent value attribute is mandatory for using the selectedItems property of the IgcButtonGroupComponent.

Size

The --ig-size CSS custom property can be used to control the size of the button group.

import { defineComponents, IgcButtonGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/material.css';
import './index.css';

defineComponents(IgcButtonGroupComponent);
export class ButtonGroupSize {
  private buttonGroup: IgcButtonGroupComponent;

  constructor() {
    this.buttonGroup = document.querySelector('igc-button-group') as IgcButtonGroupComponent;

    this.buttonGroup.addEventListener("igcSelect", (e) => {
      this.buttonGroup.style.setProperty('--ig-size', `var(--ig-size-${e.detail})`);
    });
  }
}

new ButtonGroupSize();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Button Group Size</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-button-group selection="single-required">
          <igc-toggle-button value="small">Small</igc-toggle-button>
          <igc-toggle-button value="medium">Medium</igc-toggle-button>
          <igc-toggle-button value="large" selected>Large</igc-toggle-button>
        </igc-button-group>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

The IgcButtonGroupComponent component exposes group CSS part that allows us to style the button group container. Also, the IgcToggleButtonComponents provide toggle CSS part that could be used to style the button element.

igc-button-group::part(group) {
  background-color: var(--ig-primary-500);
  padding: 8px;
}

igc-toggle-button::part(toggle) {
  color: var(--ig-secondary-300);
}
css

import { defineComponents, IgcButtonGroupComponent, IgcRippleComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/material.css';
import './index.css';

defineComponents(IgcButtonGroupComponent, IgcRippleComponent);
export class ButtonGroupStyling {
    constructor() {
    }
}

new ButtonGroupStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Button Group Alignment</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-button-group alignment="vertical">
          <igc-toggle-button value="sofia">
            <igc-ripple></igc-ripple>
            Sofia
          </igc-toggle-button>
          <igc-toggle-button value="london">
            <igc-ripple></igc-ripple>
            London
          </igc-toggle-button>
          <igc-toggle-button value="new york">
            <igc-ripple></igc-ripple>
            New York
          </igc-toggle-button>
          <igc-toggle-button value="tokyo" disabled>
            <igc-ripple></igc-ripple>
            Tokyo
          </igc-toggle-button>
        </igc-button-group>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-button-group {
    width: 200px;
}

igc-ripple {
    --color: gray;
}

igc-toggle-button::part(toggle) {
    color: #fdfdfd;
    background: #2f4d6a;
}

igc-toggle-button::part(toggle):hover {
    color: #fdfdfd;
    background: #1f3347;
}

igc-toggle-button[disabled]::part(toggle) {
    color: gray;
    background: lightgray;
}

igc-toggle-button[selected]::part(toggle) {
    color: #fdfdfd;
    background: #1f3347;
}css