Here I included some steps to solve it. For easily catch I have included code screenshots.

- Custom Locale:
Utilize the locale prop in Ant Design's TimePicker and customize the "OK" button using a custom locale object.

- Create Custom Locale:
Extend the existing locale with your modifications, changing "OK" to a custom button styled with your desired appearance.

- Remove Default "OK" Button:
Use the custom locale to remove the default "OK" button, ensuring only your custom button remains in the TimePicker footer.

- Locale Modification:
Adjust the locale's "Cancel" text to your preference, replacing it with "Close" for a more appropriate label.

- Apply Custom Locale:
Set the locale prop of the TimePicker to your custom locale object.

- Enhanced Styling:
Further enhance the styling of your custom button by applying additional CSS classes or styles as needed.

- Responsive Design:
Ensure the custom button maintains responsiveness and cohesive design within the TimePicker component.

- Testing:
Test the TimePicker component with the custom "OK" button to verify its visibility and functionality.

- Documentation:
Document the changes in your codebase and provide clear instructions for implementing this solution.

AntDesign #customAntButton @sarwarasik