Skip to main content
PESDK/Web/Customization/Components

Buttons

PhotoEditor SDK for Web can be customized easily. Learn how to quickly set up your editor in the proper language for your target audience.

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,
},
}
}