Tools

The KendoReact Toolbar allows you to render Button, ButtonGroup, DropDownButton, SplitButton and custom button components in it.

To include components in the Toolbar, wrap each of them into a ToolbarItem. You can also separate them from each other with the ToolbarSeparator.

class ToolbarContainer extends React.Component {
    render() {
        return (
            <Toolbar>
                <ToolbarItem>
                    <ButtonGroup>
                        <Button icon="bold" title="Bold" togglable={true} />
                        <Button icon="italic" title="Italic" togglable={true} />
                        <Button icon="underline" title="Underline" togglable={true} />
                    </ButtonGroup>
                </ToolbarItem>
                <ToolbarItem>
                    <ButtonGroup>
                        <Button icon="align-left" title="Align Left" togglable={true} />
                        <Button icon="align-center" title="Align Center" togglable={true} />
                        <Button icon="align-right" title="Align Right" togglable={true} />
                        <Button icon="align-justify" title="Align Justify" togglable={true} />
                    </ButtonGroup>
                </ToolbarItem>
                <ToolbarItem>
                    <Button icon="cut" title="Cut">Cut</Button>
                </ToolbarItem>
                <ToolbarItem>
                    <Button icon="copy" title="Copy">Copy</Button>
                </ToolbarItem>
                <ToolbarItem>
                    <SplitButton text="Insert">
                        <SplitButtonItem icon="image" text="Image" />
                        <SplitButtonItem icon="table" text="Table" />
                    </SplitButton>
                </ToolbarItem>
                <ToolbarSeparator />
                <ToolbarItem>
                    <DropDownButton text="Paste">
                        <DropDownButtonItem icon="text" text="Plain Text" />
                        <DropDownButtonItem icon="html" text="HTML" />
                    </DropDownButton>
                </ToolbarItem>
            </Toolbar>
        );
    }
}
ReactDOM.render(
    <ToolbarContainer/>,
    document.querySelector('my-app')
);
In this article
 /