DevExtreme – New ButtonGroup Component (v18.2)

A new DevExtreme component has been added to the latest release: ButtonGroup. It consists of a set of toggle buttons and has both single and multi-select modes. Let's take a look.

Note: This feature is available in DevExtreme for Angular, Vue, React, jQuery, and ASP.NET MVC and ASP.NET Core.

ButtonGroup

The new ButtonGroup is a simple but useful component which displays a set of buttons that allows an end-user to select one or several of them.

Easy customization

Configuration is easy and powerful:

$("#button-group").dxButtonGroup({
   items: [{
      icon: "alignleft",
      alignment: "left"
   }, {
      icon: "alignright",
      alignment: "right"
   }], 
   keyExpr: "alignment"
});

Selection Modes

ButtonGroup supports two selection modes – single and multiple. Set the selectionMode property to one of these options:

$("#button-group").dxButtonGroup({
   // …
   selectionMode: "single" | "multiple"
});

Appearance

ButtonGroup supports three new button styling modes:

Use the stylingMode property to select one of these:

$("#button-group").dxButtonGroup({
   // …
   stylingMode: 'text' | 'outlined' | 'contained'
});

Documentation

Take a look at the DevExtreme ButtonGroup documentation to learn more.

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npm install --save devextreme@18.2-unstable

Then let us know your experience with the DevExtreme ButtonGroup.

Note: After the final v18.2 release, please remove the -unstable suffix

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

• you'll see all the new features/tools/components in v18.2 and
• you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.