Skip to main content

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#

JavaScript
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#

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