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 { ContainedPrimaryButton } from 'photoeditorsdk';
import styled from 'styled-components';

const ExportButton = styled(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,
    },
  }
}