EditorToolbar

The EditorToolbar is a toolbar component for rich text editors. It provides a styled shell that toolbar actions such as buttons can be wrapped in.

Table of contents

• Examples of usage

Examples of usage

Bold
<EditorToolbar>
  <EditorToolbarButton
    icon="FormatBold"
    tooltip="Bold"
    label="Bold"
    isActive={false}
  />
</EditorToolbar>
<EditorToolbar>
  <EditorToolbarButton
    icon="FormatBold"
    tooltip="Bold"
    label="Bold"
    isActive={false}
  />
</EditorToolbar>
Hide source

BoldItalicUnderlined
Example button
<React.Fragment>
  <EditorToolbar style={{ justifyContent: 'space-between' }}>
    <div>
      <EditorToolbarButton
        icon="FormatBold"
        tooltip="Bold"
        label="Bold"
        isActive={false}
      />
      <EditorToolbarButton
        icon="FormatItalic"
        tooltip="Italic"
        label="Italic"
        isActive={false}
      />
      <EditorToolbarButton
        icon="FormatUnderlined"
        tooltip="Underlined"
        label="Underlined"
        isActive={false}
      />
    </div>
    <div>
      <Button size="small" buttonType="muted">
        Example button
      </Button>
    </div>
  </EditorToolbar>
</React.Fragment>
<React.Fragment>
  <EditorToolbar style={{ justifyContent: 'space-between' }}>
    <div>
      <EditorToolbarButton
        icon="FormatBold"
        tooltip="Bold"
        label="Bold"
        isActive={false}
      />
      <EditorToolbarButton
        icon="FormatItalic"
        tooltip="Italic"
        label="Italic"
        isActive={false}
      />
      <EditorToolbarButton
        icon="FormatUnderlined"
        tooltip="Underlined"
        label="Underlined"
        isActive={false}
      />
    </div>
    <div>
      <Button size="small" buttonType="muted">
        Example button
      </Button>
    </div>
  </EditorToolbar>
</React.Fragment>
Hide source