TabLink

The TabLink component acts as a clickable trigger that changes the active tab. By providing a location prop that corresponds to a Tab’s location, clicking a TabLink updates the tab state in the Tabs context, thereby switching the displayed content. The TabLink component shouldn’t be used outside of the Tabs component.

Usage

To use the tab system, wrap your tab links and tab content with the Tabs component. Assign a unique location string to each Tab and its corresponding TabLink. Optionally, set a default tab using the default prop.

import Tabs from '@components/Layout/Tabs/Tabs'
import Tabs from '@components/Layout/Tab/Tab'
import TabLink from '@components/Layout/TabLink/TabLink'
import Block from '@components/Layout/Block/Block';
import Flex from '@components/Layout/Flex/Flex';
import styles from './App.module.css';

const App = () => {
    return (
        <Tabs default='Local'>
            <Flex >
                <TabLink class={styles.link} location='Local'>Local</TabLink>
                <TabLink class={styles.link} location='Online'>Online</TabLink>
            </Flex>
            <Tab location='Local'>
                <Block>Local Multiplayer</Block>
            </Tab>
            <Tab location='Online'>
                <Block>Online Multiplayer</Block>
            </Tab>
        </Tabs>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	BaseComponentRef	undefined	A reference to the component that gives you access to its methods and the underlying HTML element. Useful if you need to control scrolling programmatically.
location	string	undefined	The target tab’s identifier. This value must match the location prop of a corresponding Tab component. When clicked, the TabLink updates the active tab state in the Tabs component, making the associated Tab visible.