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.
<!DOCTYPE html><html><head><title>Button Group Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-button-group><igc-toggle-buttonvalue="left"><igc-iconname="format_align_left"collection="material"></igc-icon><igc-ripple></igc-ripple></igc-toggle-button><igc-toggle-buttonvalue="center"><igc-iconname="format_align_center"collection="material"></igc-icon><igc-ripple></igc-ripple></igc-toggle-button><igc-toggle-buttonvalue="right"><igc-iconname="format_align_right"collection="material"></igc-icon><igc-ripple></igc-ripple></igc-toggle-button><igc-toggle-buttonvalue="justify"selected><igc-iconname="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
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.
<!DOCTYPE html><html><head><title>Button Group Alignment</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-button-groupalignment="vertical"><igc-toggle-buttonvalue="sofia"><igc-ripple></igc-ripple>
Sofia
</igc-toggle-button><igc-toggle-buttonvalue="london"><igc-ripple></igc-ripple>
London
</igc-toggle-button><igc-toggle-buttonvalue="new york"selected><igc-ripple></igc-ripple>
New York
</igc-toggle-button><igc-toggle-buttonvalue="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
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.
<!DOCTYPE html><html><head><title>Button Group Selection</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="radio-group-container"><label>Selection Mode</label><igc-radio-groupalignment="horizontal"><igc-radioname="mode"value="single"checked>Single</igc-radio><igc-radioname="mode"value="single-required">Single-Required</igc-radio><igc-radioname="mode"value="multiple">Multiple</igc-radio></igc-radio-group></div><igc-button-group><igc-toggle-buttonvalue="bold"><igc-iconname="bold"collection="material"></igc-icon><igc-ripple></igc-ripple></igc-toggle-button><igc-toggle-buttonvalue="italic"><igc-iconname="italic"collection="material"></igc-icon><igc-ripple></igc-ripple></igc-toggle-button><igc-toggle-buttonvalue="underlined"><igc-iconname="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Button Group Size</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-button-groupselection="single-required"><igc-toggle-buttonvalue="small">Small</igc-toggle-button><igc-toggle-buttonvalue="medium">Medium</igc-toggle-button><igc-toggle-buttonvalue="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) { %><scriptsrc="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.
<!DOCTYPE html><html><head><title>Button Group Alignment</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-button-groupalignment="vertical"><igc-toggle-buttonvalue="sofia"><igc-ripple></igc-ripple>
Sofia
</igc-toggle-button><igc-toggle-buttonvalue="london"><igc-ripple></igc-ripple>
London
</igc-toggle-button><igc-toggle-buttonvalue="new york"><igc-ripple></igc-ripple>
New York
</igc-toggle-button><igc-toggle-buttonvalue="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html