Web Components Button Group Overview

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

Web Components Button Example

Usage

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

npm install igniteui-webcomponents

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

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

defineComponents(IgcButtonGroupComponent);

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 ButtonGroup and its buttons.

Use the ButtonGroup selector to wrap your ToggleButtons 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>

Examples

Alignment

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

Selection

In order to configure the Ignite UI for Web Components ButtonGroup 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 ButtonGroup selection modes:

A ToggleButton could be marked as selected via its Selected attribute or through the ButtonGroup 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>

Size

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

Styling

The ButtonGroup component exposes group CSS part that allows us to style the button group container. Also, the ToggleButtons 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);
}

API References

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub