React: IonTabButton cannot be wrapped for use with IonTabBar

Open

#2,099 opened on Nov 17, 2021 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 1/5
Estimated time: 1-3 hours
Newbie friendliness: 45/100

Issue type: Documentation
Clarity: Mostly clear
Activity status: Stale
Tech stack: react
Domain: documentation

Research direction

Start with the IonTabBar documentation at https://ionicframework.com/docs/api/tab-bar and review how IonTabButton usage is described. Document that wrapping IonTabButton in another component prevents IonTabBar from recognizing it, using the reported wrapper example; done when the limitation is clear to readers.

Written by the indexing model from the issue text.

Description

triage

URL
https://ionicframework.com/docs/api/tab-bar

What is missing or inaccurate about the content on this page?

It seems that IonTabButton cannot be wrapped in another component; IonTabBar won't recognize it.

This should be noted in the documentation.

Background

My app puts the IonTabButton in a different order depending on whether the user is right-handed or left-handed.

Example of code that doesn't work (tabs are not displayed):

    return (
      <IonTabs>
        {children}
        <IonTabBar slot="bottom" className="app-tab-bar">
          <TabButtonHome />
          <TabButtonHelp />
        </IonTabBar>
      </IonTabs>

And here is a wrapper component:

const TabButtonHelp: React.VFC = () => (
  <IonTabButton tab="tab-help" href={routeTabHelp}>
    <IonIcon icon={helpOutline} />
    <IonLabel>
      <Trans id="tabbar_title.help">Help</Trans>
    </IonLabel>
  </IonTabButton>
);

This does work:

    return (
      <IonTabs>
        {children}
        <IonTabBar slot="bottom" className="app-tab-bar">
          <IonTabButton tab="tab-help" href={routeTabHelp}>
            <IonIcon icon={helpOutline} />
            <IonLabel>
              <Trans id="tabbar_title.help">Help</Trans>
            </IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>

Dominant language: MDX
Stars: 621
Forks: 3.2k
Avg merge: 1d 2h
Merged PRs (30d): 86

Contributor guide

Open the contributing guide

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Similar issues

Add: hunch Open

Difficulty 2/5 1-3 hours Newbie friendliness 74/100

AbdelStark/awesome-typesafe#104 · Opened Sep 22, 2026
[Bug] [Docs] cannot search `<tag name` Open

Difficulty 2/5 1-3 hours Newbie friendliness 65/100

Doenet/DoenetML#2015 · Opened Sep 22, 2026
Avoid `<details>`/`<summary>` for content with headings Open

A11y ♿️

Difficulty 2/5 1-3 hours Newbie friendliness 72/100

mozilla/protocol#1160 · Opened Sep 22, 2026
Link Checker Report Open

automated issue report

Difficulty 2/5 1-3 hours Newbie friendliness 85/100

open-energy-transition/Awesome-ESM-GUI#61 · Opened Sep 22, 2026
docs: shorten the cloud agents quickstart Open

documentation improve or update documentation priority/low triage

Difficulty 2/5 Half a day Newbie friendliness 86/100

warpdotdev/docs#782 · 1 comment · Opened Sep 22, 2026