Buttons / Toolbar / Getting Started
material theme

Getting Started with KendoReact Toolbar

The KendoReact Toolbar represents a graphical element for holding button elements and enables the user to easily structure and access them.

The KendoReact Toolbar component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-buttons package.

Basic Usage

The following example demonstrates the Toolbar in action.

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>
                    <SplitButton text="Insert">
                        <SplitButtonItem icon="image" text="Image" />
                        <SplitButtonItem icon="table" text="Table" />
                    </SplitButton>
                </ToolbarItem>
                <ToolbarSeparator />
                <ToolbarItem>
                    <Button icon="cut" title="Cut">Cut</Button>
                </ToolbarItem>
                <ToolbarItem>
                    <Button icon="copy" title="Copy">Copy</Button>
                </ToolbarItem>
                <ToolbarItem>
                    <DropDownButton text="Paste" icon="paste">
                        <DropDownButtonItem icon="text" text="Plain Text" />
                        <DropDownButtonItem icon="html" text="HTML" />
                    </DropDownButton>
                </ToolbarItem>
            </Toolbar>
        );
    }
}
ReactDOM.render(
    <ToolbarContainer/>,
    document.querySelector('my-app')
);

Functionality and Features

 /