custom button component in admin panel

default discord avatar
2 months ago
1 1

Hi community,

apart from 'Save' I need another button in the right-side navigation which allows me to execute a server side script.
It would be great to use the same style as the default save button.
If it's not possible to add it at this place it could be any other easily accessible place.
As I'm not familiar with React adding a custom component with a new functionality is quite difficult for me.
Any help is appreciated.

  • default discord avatar
    2 months ago

    Hey there,

    So we have an implementation of preview buttons for our collections. I'm not really sure, but I think that you can use the Payload API in the React component and call a custom endpoint (

    Field config

    import { Field } from "payload/types";
    import { PreviewButtonField } from "./components/PreviewButtonField";
    export const PreviewButtons: Field = {
        name: "previewButtons",
        label: "Voorbeeld",
        type: "ui",
        admin: {
            position: "sidebar",
            components: {
                Field: PreviewButtonField,

    React component:

    import { Button } from "payload/components";
    import { Label, useFormFields } from "payload/components/forms";
    import React from "react";
    import "./index.scss";
    type Props = {
        label?: string;
    export const PreviewButtonField: React.FC = ({ label }: Props) => {
        const url = useFormFields(([fields]) => fields.url);
        return (
                <Label label={label} />
                <div className="preview-buttons">
                    <a href={`${process.env.PAYLOAD_PUBLIC_FRONDEND_SERVER_URL ?? ''}${url.value}`} target="live-preview">
                    <a href={`${process.env.PAYLOAD_PUBLIC_FRONDEND_SERVER_URL ?? ''}${url.value}?draft=true`} target="draft-preview">

    And the styling:

    .preview-buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      button {
        width: 100%;
        margin: 0;
    1 reply
  • default discord avatar
    2 months ago

    Hi Matthijs, that's a great starting point! I appreciate that a lot!

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.