React Button Group Overview

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

React Button Example

Usage

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrButtonGroup and its necessary CSS, like so:

import { IgrButtonGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

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

<IgrButtonGroup>
    <IgrToggleButton value="left">
        <IgrIcon name="format_align_left" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="center">
        <IgrIcon name="format_align_center" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="right">
        <IgrIcon name="format_align_right" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
    <IgrToggleButton value="justify" selected={true}>
        <IgrIcon name="format_align_justify" collection="material"/>
        <IgrRipple/>
    </IgrToggleButton>
</IgrButtonGroup>

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 React IgrButtonGroup 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 IgrButtonGroup selection modes:

A IgrToggleButton could be marked as selected via its selected attribute or through the IgrButtonGroup selectedItems attribute:

<IgrButtonGroup selectedItems={['bold']}>
    <IgrToggleButton value="bold">
        <IgrIcon name="bold" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
    <IgrToggleButton value="italic">
        <IgrIcon name="italic" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
    <IgrToggleButton value="underlined">
        <IgrIcon name="underlined" collection="material" />
        <IgrRipple />
    </IgrToggleButton>
</IgrButtonGroup>

[!Note] Setting IgrToggleButton value attribute is mandatory for using the selectedItems property of the IgrButtonGroup.

Size

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

Styling

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