Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

For more information on how globalization practices are implemented in KendoReact, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

Internationalization

The internationalization process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Buttons do not provide built-in translated messages.

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Buttons.

class App extends React.Component {
    render() {
        return(
            <div className="example-wrapper">
                <div className="example-col">
                    <p>Button</p>
                    <Button icon="refresh" dir="rtl">Refresh &nbsp;</Button>
                    &nbsp;
                    <Button icon="search" dir="rtl" primary={true}>Search &nbsp;</Button>
                </div>
                <div className="example-col">
                    <p>ButtonGroup</p>
                    <ButtonGroup dir="rtl">
                        <Button>Option A</Button>
                        <Button>Option B</Button>
                        <Button>Option C</Button>
                    </ButtonGroup>
                </div>
                <div class="example-col">
                  <p>DropDownButton</p>
                  <DropDownButton text="User Settings" icon="cog" dir="rtl">
                    <DropDownButtonItem text="My Profile" />
                    <DropDownButtonItem text="Friend Requests" />
                    <DropDownButtonItem text="Account Settings" />
                    <DropDownButtonItem text="Support" />
                    <DropDownButtonItem text="Log Out" />
                  </DropDownButton>
                </div>
                <div class="example-col">
                  <p>SplitButton</p>
                  <SplitButton text="Paste" icon="paste" dir="rtl">
                    <SplitButtonItem text="Keep Text Only" icon="paste-plain-text" />
                    <SplitButtonItem text="Paste as HTML" icon="paste-as-html" />
                    <SplitButtonItem text="Paste Markdown" icon="paste-markdown" />
                    <SplitButtonItem text="Set Default Paste" />
                  </SplitButton>
                </div>
                <div class="example-col">
                    <p>Toolbar</p>
                    <Toolbar dir="rtl">
                        <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>
                        <ToolbarSeparator />
                        <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>
                        <ToolbarSeparator />
                        <ToolbarItem>
                            <Button icon="cut" title="Cut" dir="rtl">Cut</Button>
                        </ToolbarItem>
                        <ToolbarSeparator />
                        <ToolbarItem>
                            <Button icon="copy" title="Copy" dir="rtl">Copy</Button>
                        </ToolbarItem>
                        <ToolbarSeparator />
                        <ToolbarItem>
                            <Button icon="paste" title="Paste" dir="rtl">Paste</Button>
                        </ToolbarItem>
                  </Toolbar>
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /