DevExtreme – New ButtonGroup Component (v18.2)

DevExtreme Team Blog
02 November 2018

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.

DevExtreme ButtonGroup Component

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


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:

   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:

   // …
   selectionMode: "single" | "multiple"


ButtonGroup supports three new button styling modes:

DevExtreme DateBox - Button Styling

Use the stylingMode property to select one of these:

   // …
   stylingMode: 'text' | 'outlined' | 'contained'


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:

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.

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
Leontiev Alexey
Leontiev Alexey

very good!

6 November 2018
T Schoute
T Schoute

Can this also be used in combination with a dxToolBar? In other words, is it possible to add a dxButtonGroup to the items array of a dxToolBar?

7 November 2018
Alex B (DevExpress)
Alex B (DevExpress)

> is it possible to add a dxButtonGroup to the items array of a dxToolBar?

Yes, it's possible.

7 November 2018
Miro Mz
Miro Mz

Great addition!

8 November 2018

Please login or register to post comments.