React ButtonGroup - items

Configures buttons in the group.

Selector: Item

The items array can contain:

  • Objects with fields described in this section
  • Objects with any other fields. In this case, specify the buttonTemplate.

If you need to update the UI component items, reassign the entire items[] array as shown in the following example:

JavaScript
  • buttonGroupInstance.option('items', newItems);
See Also

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether the UI component item responds to user interaction.

Type:

Boolean

Default Value: false

elementAttr

Specifies the global attributes to be attached to the button group item's container element.

Selector: ElementAttr
Type:

Object

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import ButtonGroup from 'devextreme-react/button-group';
  •  
  • const buttonGroupItems = [{
  • // ...
  • elementAttr: {
  • class: "class-name"
  • }
  • }, // ...
  • ];
  •  
  • export default function App() {
  • return (
  • <ButtonGroup ...
  • items={buttonGroupItems}
  • />
  • );
  • }

hint

Specifies a text for the hint that appears when the button is hovered over or long-pressed.

Type:

String

icon

Specifies the icon to be displayed on the button.

Type:

String

This property accepts one of the following:

View Demo

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data: any

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular and Vue use custom templates instead of the template property. In React, specify the render property.

App.js
  • import React from 'react';
  •  
  • import ButtonGroup, {
  • Item
  • } from 'devextreme-react/button-group';
  •  
  • const renderCustomItem = () => {
  • return <div>Custom Item</div>;
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <ButtonGroup ... >
  • <Item ...
  • render={renderCustomItem}
  • >
  • </Item>
  • </ButtonGroup>
  • );
  • }
  • }
  • export default App;
See Also

text

Specifies text displayed for the UI component item.

Type:

String

type

Specifies the button type.

Type:

String

Default Value: 'normal'
Accepted Values: 'back' | 'danger' | 'default' | 'normal' | 'success'

DevExtreme provides the following button types.

Button Types

View Demo

visible

Specifies whether or not a UI component item must be displayed.

Type:

Boolean

Default Value: true