Edit Button

Available as: Web ComponentShortcodeOxygen Element

Let your clients edit text on their site using this handy component.

<p style="padding-bottom: 200px;" data-spx-edit="test"> Hello, I am test content. </p> <spx-edit-button test position="bottom-right" position-css="absolute"></spx-edit-button>

Hello, I am test content.

There is a guide available for this component.

Properties

background

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-edit-button-background

Component background property.

background-discard

Type: stringDefault: 'var(--spx-color-gray-600)'CSS variable: --spx-edit-button-background-discard

Discard button background.

border

Type: stringDefault: 'none'CSS variable: --spx-edit-button-border

Component border property.

border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-edit-button-border-radius

Component border-radius property.

class-button

Type: string

Apply classes to button.

class-button-discard

Type: string

Apply classes to button discard.

class-loader

Type: string

Apply classes to loader.

color

Type: stringDefault: '#ffffff'CSS variable: --spx-edit-button-color

Component color property.

color-discard

Type: stringDefault: '#ffffff'CSS variable: --spx-edit-button-color-discard

Discard button color.

distance-x

Type: stringDefault: '1em'CSS variable: --spx-edit-button-distance-x

Distance to the edge of the viewport on the x-axis.

distance-y

Type: stringDefault: '1em'CSS variable: --spx-edit-button-distance-y

Distance to the edge of the viewport on the y-axis.

edit-id

Type: string

Corresponding ID for editable fields. This property is needed when multiple edit-button components are used on the page. Simply apply a "data-spx-edit-id" attribute with the same value to editable elements.

font-family

Type: stringDefault: 'var(--spx-font-family)'CSS variable: --spx-edit-button-font-family

Component font-family property.

font-size

Type: stringDefault: 'var(--spx-font-size)'CSS variable: --spx-edit-button-font-size

Component font-size property.

font-size-max

Type: numberDefault: 1.2CSS variable: --spx-edit-button-font-size-max

Component font-size-max property.

font-size-min

Type: numberDefault: 1CSS variable: --spx-edit-button-font-size-min

Component font-size-min property.

gap

Type: stringDefault: '0.4em'CSS variable: --spx-edit-button-gap

Gap between the buttons.

padding

Type: stringDefault: '0.8em 1.2em'CSS variable: --spx-edit-button-padding

Component padding property.

padding-x-max

Type: numberDefault: 1.4CSS variable: --spx-edit-button-padding-x-max

Component padding-x-max property.

padding-x-min

Type: numberDefault: 1CSS variable: --spx-edit-button-padding-x-min

Component padding-x-min property.

padding-y-max

Type: numberDefault: 1.2CSS variable: --spx-edit-button-padding-y-max

Component padding-y-max property.

padding-y-min

Type: numberDefault: 0.7CSS variable: --spx-edit-button-padding-y-min

Component padding-y-min property.

position

Type: stringDefault: 'bottom-right'Choices: 'bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-right'

Component position in page.

position-css

Type: "absolute" | "fixed" | "relative" | "static"Default: 'fixed'

CSS property position of button.

styling

Type: stringDefault: 'default'Choices: 'default', 'fluid', 'headless'

Styling.

test

Type: booleanDefault: false

text-discard

Type: stringDefault: 'Discard'

Discard button text.

text-edit

Type: stringDefault: 'Edit site'

Edit button text.

text-save

Type: stringDefault: 'Save'

Save button text.

text-success

Type: stringDefault: 'Save was successful'

Success message.

z-index

Type: numberDefault: 99CSS variable: --spx-edit-button-z-index

Component z-index property.

Events

spxEditButtonDidLoad

Fires after component has loaded.

spxEditButtonDiscard

Fires after pressing the discard button.

spxEditButtonSave

Fires after pressing the save button.

Methods

discard

Discard changes.

edit

Enable editing.

reload

Reload component.

save

Save changes.