CODEWITHSUNDEEP
typescriptpayload-cms
Linardo
Linardo

Reputation: 33

How to change button text in Payload CMS

I want to change the button text from 'Publish Changes' into 'Publish Data' in the Payload CMS but can't find any file where it contain the button style that i can edit

is anyone know how to change the button name? Thank you

change the button name

Upvotes: 1

Views: 743

Answers (2)

Arek Sz.
Arek Sz.

Reputation: 1

Today, I had a similar problem. I want to add this because documentation sometimes is not enaugh :). If you want to change text in "Publish Changes" button you must:

  1. Edit your 'Pages' collection. /src/payload/collections/Pages (Payload 2.0 e-commerce version)
  2. Add this code to your collection inside admin:{}

 components: {
      edit: {
        PublishButton: CustomPublishButton, // Your custom publish button
        // You can also define other custom buttons if needed
      },
    },

  1. Import CustomPublishButton in your Pages collection

import { CustomPublishButton } from '../../components/CustomPublishButton'

  1. Create CustomPublishButton components in /src/payload/components/

import React from 'react'

    export const CustomPublishButton = props => {
      const { DefaultButton, ...rest } = props
      return <DefaultButton {...rest} draft={true} label="Save & Publish" />
    }

  1. Execute this two commands in console.

    yarn payload generate:graphQLSchema

    yarn generate:types

  2. Done

If you want to change only css styles do this bellow:

  1. Check the CSS class name of the item (using the developer console in your web browser).

  2. Add the appropriate class inside the /src/css/admin.css file. For example:

.form-submit {
  .btn__label {
    font-size: 32px;
 }
}

  1. You can find the app styles in /src/app/css/app.scss.

Upvotes: 0

Elliot DeNolf
Elliot DeNolf

Reputation: 2999

You would need to swap in a new react component in order to override the text.

The documentation for swapping out collection components is here: https://payloadcms.com/docs/admin/components#collections. You would specifically swap out the PublishButton.

You can also find the default publish button to modify here: https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/components/elements/Publish/index.tsx

Upvotes: 0

Related Questions