Docs
API Docs

Buttons

There is already a wide variaty of buttons which can be customised in the editor.

Buttons like Undo, Export or Close

  • MainCanvasActionUndo
  • MainCanvasActionRedo
  • MainCanvasActionExport
  • MainCanvasActionClose

The actions above a Sticker, Text or Text Design element which allow you to duplicate the sprite or change its order.

  • CanvasActionEdit
  • CanvasActionBringToFront
  • CanvasActionDuplicate
  • CanvasActionDelete
  • CanvasActionInvert
  • CanvasActionFlip

The actions in the Transform tool

  • TransformActionFlipHorizontal
  • TransformActionFlipVertical
  • TransformActionRotateClockwise
  • TransformActionRotateAntiClockwise

The buttons in the top section of the ToolControlBar like New Text, Reset Changes or Shuffle Layout

  • ToolControlBarPrimaryButton
  • ToolControlBarSecondaryButton

The buttons to change the alignment of a Text in the ToolControlBar

  • TextAlignment

Exported Buttons

The following buttons are available in the photoeditorsdk package and can be customised to fit your needs.

  • CanvasBarTextSecondaryButton: This button is used for Undo and Redo
  • ContainedPrimaryButton: This button is used for Export
  • OutlinedPrimaryButton: This button is used for New Text or New Text Design
  • OutlinedSecondaryButton: This button is used for Close, Reset to Default or Remove Focus
  • TextPrimaryButton: This button is used in a Dialog to confirm it
  • TextSecondaryButton: This button is used in a Dialog to dismiss it
  • SpriteActionButton: This button is used for the actions above a Sticker, Text or Text Design element on the canvas
  • IconButton: This button will only contain an icon

Examples

Changing the color of the export button

import { Buttons } from "photoeditorsdk";
import styled from "styled-components";

const ExportButton = styled(Buttons.ContainedPrimaryButton)`
  color: ${({ theme }) => theme.button.containedPrimaryForeground}
  background: ${({ theme }) => theme.button.containedPrimaryBackground}
`;

const editor = await PhotoEditorSDKUI.init({
  custom: {
    components: {
      buttons: {
        mainCanvasActionExport: ExportButton,
      },
    },
  },
});

Default configuration

custom: {
  components: {
    buttons: {
      mainCanvasActionUndo: CanvasBarTextSecondaryButton,
      mainCanvasActionRedo: CanvasBarTextSecondaryButton,
      mainCanvasActionExport: ContainedPrimaryButton,
      mainCanvasActionClose: OutlinedSecondaryButton,
      canvasActionEdit: SpriteActionButton,
      canvasActionBringToFront: SpriteActionButton,
      canvasActionDuplicate: SpriteActionButton,
      canvasActionDelete: SpriteActionButton,
      canvasActionInvert: SpriteActionButton,
      canvasActionFlip: SpriteActionButton,
      transformActionFlipHorizontal: IconButton,
      transformActionFlipVertical: IconButton,
      transformActionRotateClockwise: IconButton,
      transformActionRotateAntiClockwise: IconButton,
      textAlignment: IconButton,
      toolControlBarPrimaryButton: OutlinedPrimaryButton,
      toolControlBarSecondaryButton: OutlinedSecondaryButton,
    },
  }
}