Customize the button to show the search popover

The ShowSearchPopover component provided by the Search plugin has an optional render prop that allows to create a custom button. Here is the sample code that demonstrates the ability:
import { searchPlugin, RenderShowSearchPopoverProps } from '@react-pdf-viewer/search';
// Your render function
const searchPluginInstance = searchPlugin();
const { ShowSearchPopover } = searchPluginInstance;
<ShowSearchPopover>
{(props: RenderShowSearchPopoverProps) => (
<button
style={{
backgroundColor: '#357edd',
border: 'none',
borderRadius: '4px',
color: '#ffffff',
cursor: 'pointer',
padding: '8px',
}}
onClick={props.onClick}
>
Search
</button>
)}
</ShowSearchPopover>;

See also