problem with IonTabButton not capturing onClick events

Question

I am using the ionic 5 css library with react.

I liked the styling of IonTabButtons as opposed to IonButtons because IonTabButton allows for text underneath Icon. In the screenshot I show all the icons displayed as tab-buttons with the exception of Home which is styled as a IonButton.

I like the way the IonTabButton looks however it does not run the onclick function (no console statement).

My question would it be easier/better/possible to a) add onClick functionality to iontab or b) make IonButton appear the same way IonTabButton does with the icon and the text underneath all inside the button.

if it is option b) do you know where to find the default css properties of IonButton and IonTabButton to see where they differe / making the two appear similar easier to do.

import React from 'react'
import { useHistory } from 'react-router-dom'
import './Welcome.css'

// ionic lib imports
import {
   IonButton,
   IonCol,
   IonContent,
   IonGrid,
   IonIcon,
   IonLabel,
   IonPage,
   IonRow,
   IonTabButton
} from '@ionic/react'

// ionic icon imports
import {
   cog,
   help,
   home,
   power,
   walk
} from 'ionicons/icons'

const Welcome = (props) => {

   let history = useHistory()

   const handleHomeClick = () => {
      console.log('clicked')
      history.push('./Running')
   }

   return(
      <IonPage>
         <IonContent>
            <IonGrid>
               <IonRow>
                  <IonCol size='6'>
                     <IonButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={home} />
                        Home
                     </IonButton>
                  </IonCol>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={walk}></IonIcon>
                        <IonLabel> Jog </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
               <IonRow>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={cog}></IonIcon>
                        <IonLabel> Settings </IonLabel>
                     </IonTabButton>
                  </IonCol>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={help}></IonIcon>
                        <IonLabel> Help </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
               <IonRow>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={power}></IonIcon>
                        <IonLabel> Power </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
            </IonGrid>
         </IonContent>
      </IonPage>
   )
}

export default Welcome



/* CSS Rules For Welcome.js  */

ion-icon {
   font-size: 128px;
   color: white;
}

ion-grid {
   padding-top: 120px;
}

ion-col {
   justify-content: center;
}

ion-row {
   margin: 15px;
}

ion-button {
   height: 128px;
   width: 128px;
   line-height: 10px;
}

ion-label {
   font-size: 24px;
}

Answer 1

This is the best I could do. I switched IonTabButton to IonButton and tried to style it the same way. I had to add the following css:

.transparent{
    background-color: #0000;
}
.big-text{
    font-size: 150%;
}
.fill{
    width: 100%;
    height: 100%;
}

I added the following class:

interface ButtonInterface{
    icon: any;
    label: string;
    callback(): any;
}

const Button = ({icon,label,callback}:ButtonInterface)=>{
    return (
    <IonItem lines="none">
        <IonButton
           fill='clear'
           onClick={callback}
           color="dark"
           className="fill"
        >
        <IonList className="transparent">
            <IonIcon
               className="big-text"
               icon={icon}
            />
            <IonLabel>{label}</IonLabel>
        </IonList>
        </IonButton>
    </IonItem>
    );
}

Then this is what your html looks like:

<IonPage>
    <IonContent>
        <IonGrid>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={home} label="Home" callback={handleHomeClick} />
                </IonCol>
                <IonCol size='6'>
                    <Button icon={walk} label="Jog" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={cog} label="Settings" callback={handleHomeClick} />
                </IonCol>
                <IonCol size='6'>
                    <Button icon={help} label="Help" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={power} label="Power" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
        </IonGrid>
    </IonContent>
</IonPage>