Button Group
Documentation
ButtonGroup is a UI component that displays a set of toggleable buttons and allows a user to select one or several of them. This demo illustrates how to configure the ButtonGroup to enable single and multiple selection.
To get started with the DevExtreme ButtonGroup component, refer to the following tutorial for step-by-step instructions: Getting Started with ButtonGroup.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import { ButtonGroup } from 'devextreme-react/button-group';
import notify from 'devextreme/ui/notify';
import { alignments, fontStyles } from './data.js';
const selectedItemKeys = ['left'];
class App extends React.Component {
render() {
return (
<div>
<div className="buttongroups-container">
<ButtonGroup
items={alignments}
keyExpr="alignment"
stylingMode="outlined"
selectedItemKeys={selectedItemKeys}
onItemClick={itemClick}
/>
<ButtonGroup
items={fontStyles}
keyExpr="style"
stylingMode="outlined"
selectionMode="multiple"
onItemClick={itemClick}
/>
</div>
<div className="buttongroups-container">
<ButtonGroup
items={alignments}
keyExpr="alignment"
stylingMode="text"
selectedItemKeys={selectedItemKeys}
onItemClick={itemClick}
/>
<ButtonGroup
className="multiple-selection-styling-mode"
items={fontStyles}
keyExpr="style"
stylingMode="text"
selectionMode="multiple"
onItemClick={itemClick}
/>
</div>
</div>
);
}
}
function itemClick(e) {
notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.buttongroups-container {
display: flex;
justify-content: center;
font-size: 16px;
}
.buttongroups-container > div {
padding: 0 12px;
}
.buttongroups-container:first-child {
margin-top: 120px;
margin-bottom: 40px;
}
.multiple-selection-styling-mode {
border-left-width: 1px;
border-left-style: solid;
border-color: #ddd;
}
export const alignments = [
{
icon: 'alignleft',
alignment: 'left',
hint: 'Align left',
},
{
icon: 'aligncenter',
alignment: 'center',
hint: 'Center',
},
{
icon: 'alignright',
alignment: 'right',
hint: 'Align right',
},
{
icon: 'alignjustify',
alignment: 'justify',
hint: 'Justify',
},
];
export const fontStyles = [
{
icon: 'bold',
style: 'bold',
hint: 'Bold',
},
{
icon: 'italic',
style: 'italic',
hint: 'Italic',
},
{
icon: 'underline',
style: 'underline',
hint: 'Underlined',
},
{
icon: 'strike',
style: 'strike',
hint: 'Strikethrough',
},
];
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@21.2.5/cjs',
'devextreme-react': 'npm:devextreme-react@21.2.5',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.11/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.45/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.0.3/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@2.3.14',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@2.3.14/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);