Having tabs that look like buttons

Question

I have this example that I took from React Fluent UI: https://stackblitz.com/edit/fahztj?file=src%2Fexample.tsx.

I tried to modify it in a way that the component Tab is now a Button, however the tabs do not work any more. It seems that the Tab component has something in built that helps with the functionality.

Is there a way from that example to either:

• Make the Button component work as a Tab;
• Make the Tab look like a Button?

Is either of these two options even possible?

Answer 1

I think there are multiple ways. One of the quickest might be to simply wrap the buttons in tabs

      <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
        <Tab id="Arrivals" value="arrivals">
          <Button icon={<Airplane />}>Arrivals</Button>
        </Tab>
        <Tab id="Departures" value="departures">
          <Button icon={<AirplaneTakeOff />}>Departures</Button>
        </Tab>
        <Tab id="Conditions" value="conditions">
          <Button icon={<TimeAndWeather />}>Conditions</Button>
        </Tab>
      </TabList>