Absolutely! Adding custom buttons to an Ant Design Modal's header is totally achievable—let me walk you through a couple of reliable solutions that work with most Antd versions (v4 and v5 included).

Solution 1: Customize the title Property (Works for v4 & v5) #

Ant Design's Modal title prop doesn't just accept plain text—it can take any React node. This lets you build a full custom header layout directly within the title, including your buttons.

Here's a practical example:

import { useState } from 'react';
import { Modal, Button, Space } from 'antd';

const CustomHeaderModal = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => setIsModalOpen(true);
  const handleCancel = () => setIsModalOpen(false);

  const handleCustomBtn1 = () => {
    console.log('Custom action 1 triggered!');
    // Add your logic here
  };

  const handleCustomBtn2 = () => {
    console.log('Custom action 2 triggered!');
    // Add your logic here
  };

  return (
    <>
      <Button onClick={showModal}>Open Modal</Button>
      <Modal
        open={isModalOpen}
        onCancel={handleCancel}
        // Build custom header using the title prop
        title={
          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center', 
            width: '100%' 
          }}>
            <span>My Custom Modal Title</span>
            <Space size="small">
              <Button type="text" onClick={handleCustomBtn1}>
                Action 1
              </Button>
              <Button type="primary" onClick={handleCustomBtn2}>
                Action 2
              </Button>
            </Space>
          </div>
        }
        footer={null} {/* Optional: Remove default footer or customize it */}
      >
        This is your modal content area.
      </Modal>
    </>
  );
};

export default CustomHeaderModal;

This approach keeps the default close button intact (it will sit to the right of your custom buttons) and uses Flexbox to align the title and buttons neatly.

Solution 2: Use headerRender (Antd v5 Only) #

If you're using Ant Design v5, there's a dedicated headerRender prop designed explicitly for customizing the modal header. This gives you full control over the entire header section, including replacing the default close button if needed.

Example code:

import { useState } from 'react';
import { Modal, Button, Space, CloseOutlined } from 'antd';

const HeaderRenderModal = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => setIsModalOpen(true);
  const handleCancel = () => setIsModalOpen(false);

  return (
    <>
      <Button onClick={showModal}>Open Modal</Button>
      <Modal
        open={isModalOpen}
        onCancel={handleCancel}
        // Fully customize the header with headerRender
        headerRender={() => (
          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center', 
            width: '100%',
            padding: '16px 24px' // Match Antd's default header padding
          }}>
            <span>My Custom Modal Title</span>
            <Space size="small">
              <Button type="text">Action 1</Button>
              <Button type="primary">Action 2</Button>
              {/* Add back the close button if you want it */}
              <CloseOutlined onClick={handleCancel} style={{ cursor: 'pointer' }} />
            </Space>
          </div>
        )}
        footer={null}
      >
        This is your modal content area.
      </Modal>
    </>
  );
};

export default HeaderRenderModal;

Note: When using headerRender, the default close button is removed, so you'll need to add it back manually if you want to keep it (like in the example above).

Quick Tips #

• Styling: Use inline styles or Ant Design's built-in CSS classes to match the modal's default design system. For example, using Space component ensures consistent spacing between buttons.
• Event Handling: Custom buttons work just like regular Ant Design buttons—attach your onClick handlers directly to them.
• Version Compatibility: Stick to Solution 1 if you're on v4, or use Solution 2 for the cleaner v5-specific approach.

Either of these methods should get your custom header buttons working smoothly. If you hit any styling quirks or edge cases, feel free to share more details!

内容的提问来源于stack exchange，提问作者Anuj.Srivastav