React ButtonGroup - items

Configures buttons in the group.

Selector: Item
Type:

Array<dxButtonGroupItem>

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

jQuery
$(function(){
    $("#buttonGroup").dxButtonGroup({
        items: [{
            // ...
            elementAttr: {
                class: "class-name"
            }
        }, // ...
        ]
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-button-group ... 
    [items]="buttonGroupItems>
</dx-button-group>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    buttonGroupItems = [{
        // ...
        elementAttr: {
            class: "class-name"
        }
    }, // ...
    ]
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxButtonGroupModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxButtonGroupModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxButtonGroup ...
        :items="buttonGroupItems"
    />
</template>

<script>
import DxButtonGroup from 'devextreme-vue/button-group';

const buttonGroupItems = [{
    // ...
    elementAttr: {
        class: "class-name"
    }
}, // ...
];

export default {
    components: {
        DxButtonGroup,
    },
    data() {
        return {
            buttonGroupItems
        }
    }
}
</script>
React
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.

jQuery
index.js
$(function() {
    $("#buttonGroupContainer").dxButtonGroup({
        // ...
        items: [
            {
                // ...
                template: '<div>Custom Item</div>'
            }
        ]
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-button-group ... >
    <dxi-item ... >
        <div *dxTemplate>
            <div>Custom Item</div>
        </div>
    </dxi-item>
</dx-button-group>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxButtonGroupModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxButtonGroupModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxButtonGroup ... >
        <dxItem ... >
            <div>Custom Item</div>
        </dxItem>
    </DxButtonGroup>
</template>

<script>

import DxButtonGroup, {
    DxItem
} from 'devextreme-vue/button-group';

export default {
    components: {
        DxButtonGroup,
        DxItem
    },
    // ...
}
</script>
React
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