Toolbar Widgets

Widgets can be added to the cms.toolbar to give users easy access to certain features.


interface ToolbarWidgetPlugin<Props = any> {
  __type: 'toolbar:widget'
  name: string
  weight: number
  component(): React.ReactElement
  props?: Props
__typeThe type of the plugin. Always toolbar:widget .
nameThe name of this particular widget.
weightUsed to order the toolbar widgets.
componentThe React component to render in the toolbar.
propsExtra props to pass to the component. (Optional)

Available Toolbar Widgets


Repository InformationDisplays the name of the current repository along with a link.
Branch SelectAllows editors to create and switch branches.
Pull RequestAllows editors to open a pull request

Making Your Own Toolbar Widgets

Add a Button to the Toolbar

function HowdyButton() {
  return <button onClick={() => alert('Good day to ya')}>Howdy</button>

export const HowdyWidget = {
  __type: 'toolbar:widget',
  name: 'howdy',
  weight: 5,
  component: HowdyButton,

With the plugin defined you can add it to the widget by calling cms.plugins.add(HowdyWidget).