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:
Button
component work as a Tab
;Tab
look like a Button
?Is either of these two options even possible?
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>