metropolitan-bronze•4w ago

Customize save button

having in mind the templates that refine provides for views is there a way to modify the save button to always show on screen for the create pages?

2 Replies

kapa.ai•4w ago

Hi @Lost Spartan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the save button in refine's create pages to always show on screen. Refine provides several ways to customize the save button in its UI components. Customizing the Save Button Using footerButtons prop The <Create/> component in refine has a footerButtons property that allows you to customize the buttons at the footer. You can use this to ensure the save button is always visible:

import { Create, SaveButton } from "@refinedev/antd"; // or your UI framework
import { Button } from "antd"; // or your UI framework

const PostCreate = () => {
  return (
    <Create
      footerButtons={({ saveButtonProps }) => (
        <>
          <SaveButton
            {...saveButtonProps}
            style={{ 
              position: "fixed", 
              bottom: "20px", 
              right: "20px",
              zIndex: 999
            }}
          />
        </>
      )}
    >
      <p>Rest of your page here</p>
    </Create>
  );
};

import { Create, SaveButton } from "@refinedev/antd"; // or your UI framework
import { Button } from "antd"; // or your UI framework

const PostCreate = () => {
  return (
    <Create
      footerButtons={({ saveButtonProps }) => (
        <>
          <SaveButton
            {...saveButtonProps}
            style={{ 
              position: "fixed", 
              bottom: "20px", 
              right: "20px",
              zIndex: 999
            }}
          />
        </>
      )}
    >
      <p>Rest of your page here</p>
    </Create>
  );
};

This approach is available in different UI frameworks that refine supports: - Ant Design footerButtons - Material UI footerButtons - Chakra UI footerButtons - Mantine footerButtons Using saveButtonProps Alternatively, you can use the saveButtonProps property to customize the save button:

import { Create } from "@refinedev/mui"; // or your UI framework
const PostCreate = () => {
  return (
    <Create
      saveButtonProps={{
        style: {
          position: "fixed",
          bottom: "20px",
          right: "20px",
          zIndex: 999
        }
      }}
    >
      <span>Rest of your page here</span>
    </Create>
  );
};

import { Create } from "@refinedev/mui"; // or your UI framework
const PostCreate = () => {
  return (
    <Create
      saveButtonProps={{
        style: {
          position: "fixed",
          bottom: "20px",
          right: "20px",
          zIndex: 999
        }
      }}
    >
      <span>Rest of your page here</span>
    </Create>
  );
};

This approach is documented in Material UI saveButtonProps. Using footerButtonProps (Material UI) Material UI specifically offers a footerButtonProps property:

import { Create } from "@refinedev/mui";

const PostCreate = () => {
  return (
    <Create
      footerButtonProps={{
        saveButtonProps: {
          style: {
            position: "fixed",
            bottom: "20px",
            right: "20px",
            zIndex: 999
          }
        },
      }}
    >
      <span>Rest of your page here</span>
    </Create>
  );
};

import { Create } from "@refinedev/mui";

const PostCreate = () => {
  return (
    <Create
      footerButtonProps={{
        saveButtonProps: {
          style: {
            position: "fixed",
            bottom: "20px",
            right: "20px",
            zIndex: 999
          }
        },
      }}
    >
      <span>Rest of your page here</span>
    </Create>
  );
};

This is documented in Material UI footerButtonProps. Choose the approach that best fits your UI framework and requirements. The key CSS properties to make the button always visible are position: "fixed", appropriate positioning with bottom and right, and a high zIndex value. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@244898948488101898> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Customize save button

Did you find this page helpful?