How to move Cancel button to the right in IonSearchbar in Ionic React

Question

I tried to make the search bar in Ionic React but the Cancel button is on the left instead of right. Here is my code:

<IonHeader>
  {searchActive? <IonSearchbar slot="start" showCancelButton="never">
    <IonButton slot="end" fill="clear" onClick={()=>{setSearchActive(false);}} >Cancel</IonButton>
    </IonSearchbar> : null }
  
</IonHeader>

Can you please help me move that Cancel button to the right?

Answer 1

You must change slot to end.

<IonHeader>
  {searchActive? <IonSearchbar slot="end" showCancelButton="never">
    <IonButton slot="end" fill="clear" onClick={()=>{setSearchActive(false);}} >Cancel</IonButton>
    </IonSearchbar> : null }
</IonHeader>

https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/