IonCard with RouterLink overrides buttons


When I use the routerLink prop on an IonCard with two IonButton and when the buttons are clicked the onClick callback is used as expected, but the page navigates forward; this is not the desired behavior.

How can I do this properly? I want to have two buttons that do not navigate to the routerLink page.

  • IonCard that navigates to a new page when clicked.
  • IonCard has a IonButton that does not navigate to page when clicked.
import { PostView } from "lemmy-js-client";
import {
} from "@ionic/react";
import { arrowUpCircleOutline, chatboxOutline } from "ionicons/icons";
import styled from "@emotion/styled";

const Container = styled.div`
  margin: 0 0 16px;
  width: 100%;
  align-content: center;

export default function PostFeedCardItem(props: { post: PostView }) {
  const handlePostClick = () => {
    console.log("Card clicked!");
  const post =;
  return (
    <IonCard routerLink={`/page/PostPage/${}`}>

        <IonImg src={}></IonImg>
              <IonIcon icon={arrowUpCircleOutline} size="medium"></IonIcon>

              <IonText color="secondary">{post.counts.upvotes}</IonText>
            <IonIcon icon={chatboxOutline} size="medium"></IonIcon>
            <IonText color="secondary">
            <IonButton fill="clear" onClick={handlePostClick}>
            <IonButton fill="clear">Downvote</IonButton>

You have set the routerLink attribute for IonCard, which means clicking anything in the card will function as a link.

So yes, pressing any of the buttons on the card will automatically navigate to the next page.

If you want the buttons to not navigate to a new page, do not set routerLink for IonCard; instead, use a regular link. You can wrap everything below IonCard up to the first button in one link, and then wrap the rest in a second link to the same destination.

However, you might want to consider whether this is a familiar behavior for the user. I can’t think of any common interface where touching a card-link element navigates to a new page, but the buttons on the card do not. It seems very confusing if a user tries to touch the button but the fingers misses and touches the card and the app navigates.