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 Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.