Tabs API - React Magma

Tabs allow navigation between different sets of related content or can be used to navigate an entire application.

Basic Usage

The tab system is made up of five components: TabsContainer, which contains both the tabs navigation and the respective content. Tabs, which contains the tabs navigation bar. Tab, which is each individual menu item within the tabs navigation bar. TabPanelsContainer, which contains the tab panels and internally handles the index relationship with Tabs. And TabPanel, which contains the individual content sections for each tab.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
} from 'react-magma-dom';

export function Example() {
  return (
    <TabsContainer activeIndex={1}>
      <Tabs aria-label="Sample Tabs">
        <Tab>Main page</Tab>
        <Tab>FAQ</Tab>
        <Tab>About us</Tab>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Vertical Tabs

The orientation prop can be used to display tabs vertically, instead of horizontally.
The orientation prop is an enum that accepts either horizontal or vertical with horizontal being the default. This prop is specified on the Tabs component.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  TabsOrientation,
  magma,
} from 'react-magma-dom';

export function Example() {
  return (
    <TabsContainer>
      <Tabs
        aria-label="Sample Vertical Tabs"
        orientation={TabsOrientation.vertical}
      >
        <Tab>Main page with a longer text label</Tab>
        <Tab>FAQ</Tab>
        <Tab>About us</Tab>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Border Position

By default, horizontal tabs have the indicator placed underneath the tabs. However, it is possible to display the indicator on the top edge of the tabs.

Caution: Displaying tabs below their associated content panel is most commonly used for navigation that appears at the bottom of the viewport on mobile devices. Using this same pattern for a simple set of tabbed content on a page could be unfamiliar and confusing to the user, and should not be used without proper user-testing.

The borderPosition prop is an enum and accepts top or bottom for horizontal tabs. The borderPosition prop is specified on the Tabs component and will apply to each individual tab.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  TabsBorderPosition,
  magma,
} from 'react-magma-dom';

export function Example() {
  return (
    <TabsContainer>
      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
      <Tabs
        aria-label="Sample Border Top Tabs"
        borderPosition={TabsBorderPosition.top}
      >
        <Tab>Main page</Tab>
        <Tab>FAQ</Tab>
        <Tab>About us</Tab>
      </Tabs>
    </TabsContainer>
  );
}

Border Position (vertical)

By default, vertical tabs have the indicator placed to the left. However, there are times you may want to place the indicator to the right of the tabs, such as when the tab menu is displayed to the left of its content. The borderPosition prop is an enum and accepts left or right for horizontal tabs.

The borderPosition prop is specified on the Tabs component and will apply to each individual tab.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  TabsBorderPosition,
  TabsOrientation,
  magma,
} from 'react-magma-dom';

export function Example() {
  return (
    <TabsContainer>
      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
      <Tabs
        aria-label="Sample Border Right Vertical Tabs"
        borderPosition={TabsBorderPosition.right}
        orientation={TabsOrientation.vertical}
      >
        <Tab>Main page</Tab>
        <Tab>FAQ</Tab>
        <Tab>About us</Tab>
      </Tabs>
    </TabsContainer>
  );
}

Custom Tab Wrappers

Tabs expects its children to be of type Tab, be an element in which its lowest child is of type Tab, or a custom component that returns a Tab.

For a custom component you'll receive a tabsProps prop that you must spread in to the Tab component in your renderer.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
} from 'react-magma-dom';

export function Example() {
  const OptionalTab = ({ toggle, tabProps }) => {
    return toggle ? <Tab {...tabProps}>Hello There</Tab> : null;
  };

  return (
    <TabsContainer activeIndex={0}>
      <Tabs aria-label="Sample Custom Wrappers Tabs">
        <Tab>Main page</Tab>
        <OptionalTab toggle />
        <div>
          <Tab>FAQ</Tab>
        </div>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>Optional</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Custom Tabs Logic

This is a simple example of Tab Components with custom switching logic

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  magma,
} from 'react-magma-dom';

export function Example() {
  const [activeIndex, setActiveIndex] = React.useState(0);

  function handleChange(index) {
    setActiveIndex(index);
  }

  return (
    <TabsContainer activeIndex={activeIndex}>
      <Tabs aria-label="Sample Custom Logic Tabs" onChange={handleChange}>
        <Tab>First item</Tab>
        <Tab>Second item</Tab>
        <Tab>Third item</Tab>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>First item</div>
        </TabPanel>
        <TabPanel>
          <div>Second item</div>
        </TabPanel>
        <TabPanel>
          <div>Third item</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Custom Tab OnClick

Custom logic can also be added to an individual Tab, by using the onClick prop.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
} from 'react-magma-dom';

export function Example() {
  function customOnClick(index) {
    console.log('Custom OnClick');
  }

  return (
    <TabsContainer activeIndex={1}>
      <Tabs aria-label="Sample Custom Tab OnClick">
        <Tab onClick={customOnClick}>Main page</Tab>
        <Tab>FAQ</Tab>
        <Tab>About us</Tab>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Disabled Tabs

If a Tab is disabled using the disabled prop, it will not be actionable. It will still appear in the menu, but will be styled to appear greyed out.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  magma,
} from 'react-magma-dom';

export function Example() {
  return (
    <TabsContainer>
      <Tabs aria-label="Sample With Disabled Tabs">
        <Tab>Main page</Tab>
        <Tab disabled>FAQ</Tab>
        <Tab>About us</Tab>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Alignment

The alignment prop determines whether the tabs are aligned left, right or center. Left is the default.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  TabsAlignment,
} from 'react-magma-dom';

export function Example() {
  return (
    <TabsContainer>
      <Tabs
        aria-label="Sample Center Alignment Tabs"
        alignment={TabsAlignment.center}
      >
        <Tab>Main page</Tab>
        <Tab>FAQ</Tab>
        <Tab>About us</Tab>
      </Tabs>
      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Text Transform

For all Tabs

Options for the textTransform prop for tabs include uppercase and none, with uppercase (all caps) being the default value. This sets the CSS text-transform property.

import React from 'react';
import { Tabs, Tab, TabsContainer, TabsTextTransform } from 'react-magma-dom';

export function Example() {
  return (
    <>
      <TabsContainer>
        <Tabs textTransform={TabsTextTransform.uppercase}>
          <Tab>First uppercase</Tab>
          <Tab>Second uppercase</Tab>
        </Tabs>
      </TabsContainer>
      <br />
      <br />
      <br />
      <TabsContainer>
        <Tabs textTransform={TabsTextTransform.none}>
          <Tab>First lowercase</Tab>
          <Tab>Second lowercase</Tab>
        </Tabs>
      </TabsContainer>
    </>
  );
}

For a certain Tab

textTransform prop can also be used for Tab component.

import React from 'react';
import { Tabs, Tab, TabsContainer, TabsTextTransform } from 'react-magma-dom';

export function Example() {
  return (
    <TabsContainer>
      <Tabs>
        <Tab>All caps (default)</Tab>
        <Tab textTransform={TabsTextTransform.none}>No Text Transform</Tab>
        <Tab textTransform={TabsTextTransform.uppercase}>
          Uppercase transform
        </Tab>
      </Tabs>
    </TabsContainer>
  );
}

Full Width

The isFullWidth prop is an optional boolean that will cause the tabs to take up the full width of their container. The isFullWidth prop is specified on the Tabs component.

Full width tabs work best when inside a smaller container. This example uses the useMediaQuery hook to set this prop only on devices with smaller browser widths.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  useMediaQuery,
  magma,
} from 'react-magma-dom';

export function Example() {
  const isSmallerScreen = useMediaQuery(
    `(max-width:${magma.breakpoints.large}px)`
  );

  return (
    <TabsContainer>
      <Tabs aria-label="Sample Full Width Tabs" isFullWidth={isSmallerScreen}>
        <Tab>Main Page with a longer text label</Tab>
        <Tab>FAQ</Tab>
        <Tab>About Us</Tab>
      </Tabs>
      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Scrollable Tabs

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  magma,
} from 'react-magma-dom';

export function Example() {
  return (
    <div>
      <TabsContainer>
        <Tabs aria-label="Sample Scrollable Tabs">
          <Tab>First item with a longer text label</Tab>
          <Tab>Second item</Tab>
          <Tab>Third item</Tab>
          <Tab>Fourth item</Tab>
          <Tab>Fifth item</Tab>
          <Tab>Sixth item</Tab>
          <Tab>Seventh item</Tab>
          <Tab>Eighth item</Tab>
        </Tabs>

        <TabPanelsContainer>
          <TabPanel>
            <div>First item</div>
          </TabPanel>
          <TabPanel>
            <div>Second item</div>
          </TabPanel>
          <TabPanel>
            <div>Third item</div>
          </TabPanel>
          <TabPanel>
            <div>Fourth item</div>
          </TabPanel>
          <TabPanel>
            <div>Fifth item</div>
          </TabPanel>
          <TabPanel>
            <div>Sixth item</div>
          </TabPanel>
          <TabPanel>
            <div>Seventh item</div>
          </TabPanel>
          <TabPanel>
            <div>Eighth item</div>
          </TabPanel>
        </TabPanelsContainer>
      </TabsContainer>
    </div>
  );
}

Scrollable Vertical Tabs

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  TabsOrientation,
  magma,
} from 'react-magma-dom';

export function Example() {
  return (
    <TabsContainer style={{ height: '200px', overflow: 'hidden' }}>
      <Tabs
        aria-label="Sample Scrollable Vertical Tabs"
        orientation={TabsOrientation.vertical}
      >
        <Tab>First item</Tab>
        <Tab>Second item</Tab>
        <Tab>Third item</Tab>
        <Tab>Fourth item</Tab>
        <Tab>Fifth item</Tab>
        <Tab>Sixth item</Tab>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>First item</div>
        </TabPanel>
        <TabPanel>
          <div>Second item</div>
        </TabPanel>
        <TabPanel>
          <div>Third item</div>
        </TabPanel>
        <TabPanel>
          <div>Fourth item</div>
        </TabPanel>
        <TabPanel>
          <div>Fifth item</div>
        </TabPanel>
        <TabPanel>
          <div>Sixth item</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

ScrollSpy Tabs

Important ScrollSpy is a beta component. Please use at your own risk.

The TabsScrollSpyContainer enables a vertical nav which follows the active content in view as the user scrolls. The component requires the TabScrollSpyPanel to house each area and a tabLabel to assign it's navigation title.

Please note that a containing div has been used to showcase the scrolling behavior. This isn't a requirement for the component to function.

import React from 'react';
import {
  TabsScrollSpyContainer,
  TabScrollSpyPanel,
  magma,
} from 'react-magma-dom';

export function Example() {
  return (
    <TabsScrollSpyContainer>
      <div style={{ height: '300px', overflow: 'auto' }}>
        <TabScrollSpyPanel tabLabel="Card 1">
          Card 1
          <p>
            Amet aliquam id diam maecenas ultricies mi. Venenatis tellus in
            metus vulputate eu scelerisque felis imperdiet. Tristique
            sollicitudin nibh sit amet commodo nulla facilisi nullam. Facilisis
            sed odio morbi quis commodo odio aenean. Odio tempor orci dapibus
            ultrices in iaculis nunc sed augue. In arcu cursus euismod quis
            viverra nibh cras. Tincidunt ornare massa eget egestas purus viverra
            accumsan in nisl. Porta nibh venenatis cras sed felis. Felis donec
            et odio pellentesque diam. Aliquam ut porttitor leo a diam
            sollicitudin. Sed sed risus pretium quam vulputate dignissim
            suspendisse in. Fringilla ut morbi tincidunt augue interdum. Vel
            elit scelerisque mauris pellentesque pulvinar.
          </p>
          <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
          </p>
          <p>
            Amet aliquam id diam maecenas ultricies mi. Venenatis tellus in
            metus vulputate eu scelerisque felis imperdiet. Tristique
            sollicitudin nibh sit amet commodo nulla facilisi nullam. Facilisis
            sed odio morbi quis commodo odio aenean. Odio tempor orci dapibus
            ultrices in iaculis nunc sed augue. In arcu cursus euismod quis
            viverra nibh cras. Tincidunt ornare massa eget egestas purus viverra
            accumsan in nisl. Porta nibh venenatis cras sed felis. Felis donec
            et odio pellentesque diam. Aliquam ut porttitor leo a diam
            sollicitudin. Sed sed risus pretium quam vulputate dignissim
            suspendisse in. Fringilla ut morbi tincidunt augue interdum. Vel
            elit scelerisque mauris pellentesque pulvinar.
          </p>
        </TabScrollSpyPanel>
        <TabScrollSpyPanel tabLabel="Card 2">
          Card 2
          <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
          </p>
          <p>
            Amet aliquam id diam maecenas ultricies mi. Venenatis tellus in
            metus vulputate eu scelerisque felis imperdiet. Tristique
            sollicitudin nibh sit amet commodo nulla facilisi nullam. Facilisis
            sed odio morbi quis commodo odio aenean. Odio tempor orci dapibus
            ultrices in iaculis nunc sed augue. In arcu cursus euismod quis
            viverra nibh cras. Tincidunt ornare massa eget egestas purus viverra
            accumsan in nisl. Porta nibh venenatis cras sed felis. Felis donec
            et odio pellentesque diam. Aliquam ut porttitor leo a diam
            sollicitudin. Sed sed risus pretium quam vulputate dignissim
            suspendisse in. Fringilla ut morbi tincidunt augue interdum. Vel
            elit scelerisque mauris pellentesque pulvinar.
          </p>
          <p>
            Amet aliquam id diam maecenas ultricies mi. Venenatis tellus in
            metus vulputate eu scelerisque felis imperdiet. Tristique
            sollicitudin nibh sit amet commodo nulla facilisi nullam. Facilisis
            sed odio morbi quis commodo odio aenean. Odio tempor orci dapibus
            ultrices in iaculis nunc sed augue. In arcu cursus euismod quis
            viverra nibh cras. Tincidunt ornare massa eget egestas purus viverra
            accumsan in nisl. Porta nibh venenatis cras sed felis. Felis donec
            et odio pellentesque diam. Aliquam ut porttitor leo a diam
            sollicitudin. Sed sed risus pretium quam vulputate dignissim
            suspendisse in. Fringilla ut morbi tincidunt augue interdum. Vel
            elit scelerisque mauris pellentesque pulvinar.
          </p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </TabScrollSpyPanel>
        <TabScrollSpyPanel tabLabel="Card 3">
          Card 3
          <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
          </p>
          <p>
            Amet aliquam id diam maecenas ultricies mi. Venenatis tellus in
            metus vulputate eu scelerisque felis imperdiet. Tristique
            sollicitudin nibh sit amet commodo nulla facilisi nullam. Facilisis
            sed odio morbi quis commodo odio aenean. Odio tempor orci dapibus
            ultrices in iaculis nunc sed augue. In arcu cursus euismod quis
            viverra nibh cras. Tincidunt ornare massa eget egestas purus viverra
            accumsan in nisl. Porta nibh venenatis cras sed felis. Felis donec
            et odio pellentesque diam. Aliquam ut porttitor leo a diam
            sollicitudin. Sed sed risus pretium quam vulputate dignissim
            suspendisse in. Fringilla ut morbi tincidunt augue interdum. Vel
            elit scelerisque mauris pellentesque pulvinar.
          </p>
          <p>
            Amet aliquam id diam maecenas ultricies mi. Venenatis tellus in
            metus vulputate eu scelerisque felis imperdiet. Tristique
            sollicitudin nibh sit amet commodo nulla facilisi nullam. Facilisis
            sed odio morbi quis commodo odio aenean. Odio tempor orci dapibus
            ultrices in iaculis nunc sed augue. In arcu cursus euismod quis
            viverra nibh cras. Tincidunt ornare massa eget egestas purus viverra
            accumsan in nisl. Porta nibh venenatis cras sed felis. Felis donec
            et odio pellentesque diam. Aliquam ut porttitor leo a diam
            sollicitudin. Sed sed risus pretium quam vulputate dignissim
            suspendisse in. Fringilla ut morbi tincidunt augue interdum. Vel
            elit scelerisque mauris pellentesque pulvinar.
          </p>
        </TabScrollSpyPanel>
      </div>
    </TabsScrollSpyContainer>
  );
}

Icon

The icon prop can be used to display an icon inside the individual Tab components.

Icon Only

Tab components without children can be used to display an icon only version of the tabs. Be sure to include an aria-label for each tab, when using this pattern.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  magma,
} from 'react-magma-dom';

import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons';

export function Example() {
  const emailIcon = <EmailIcon />;
  const androidIcon = <AndroidIcon />;
  const bellIcon = <NotificationsIcon />;

  return (
    <TabsContainer>
      <Tabs aria-label="Sample Icon Only Tabs">
        <Tab aria-label="Email" icon={emailIcon} />
        <Tab aria-label="Android" icon={androidIcon} />
        <Tab aria-label="Notifications" icon={bellIcon} />
      </Tabs>
      <TabPanelsContainer>
        <TabPanel>
          <div>Email</div>
        </TabPanel>
        <TabPanel>
          <div>Android</div>
        </TabPanel>
        <TabPanel>
          <div>Notifications</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Icon With Text

Tab components with children and icon prop will display both the icon and the children. By default, the icons appear above the children.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  magma,
} from 'react-magma-dom';

import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons';

export function Example() {
  const emailIcon = <EmailIcon />;
  const androidIcon = <AndroidIcon />;
  const bellIcon = <NotificationsIcon />;

  return (
    <TabsContainer>
      <Tabs aria-label="Sample Icon With Text Tabs">
        <Tab icon={emailIcon}>First item with a longer text label</Tab>
        <Tab icon={androidIcon}>Second item</Tab>
        <Tab icon={bellIcon}>Third item</Tab>
      </Tabs>
      <TabPanelsContainer>
        <TabPanel>
          <div>Email</div>
        </TabPanel>
        <TabPanel>
          <div>Android</div>
        </TabPanel>
        <TabPanel>
          <div>Bell</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Vertical Tabs with Icons

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  TabsOrientation,
  magma,
} from 'react-magma-dom';

import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons';

export function Example() {
  const emailIcon = <EmailIcon />;
  const androidIcon = <AndroidIcon />;
  const bellIcon = <NotificationsIcon />;

  return (
    <TabsContainer>
      <Tabs
        aria-label="Sample Vertical Icon Tabs"
        orientation={TabsOrientation.vertical}
      >
        <Tab icon={emailIcon}>First item with a longer text label</Tab>
        <Tab icon={androidIcon}>Second item</Tab>
        <Tab icon={bellIcon}>Third item</Tab>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>Email</div>
        </TabPanel>
        <TabPanel>
          <div>Android</div>
        </TabPanel>
        <TabPanel>
          <div>Bell</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Icon Position

The iconPosition prop can be used to position the icon relative to the children.
The iconPosition prop is an enum that accepts left, top, right or bottom with top being the default for horizontal tabs. This prop is specified on the Tabs component.

import React from 'react';
import { TabsContainer, Tabs, Tab, TabsIconPosition } from 'react-magma-dom';

import { EmailIcon, AndroidIcon, NotificationsIcon } from 'react-magma-icons';

export function Example() {
  const emailIcon = <EmailIcon />;
  const androidIcon = <AndroidIcon />;
  const bellIcon = <NotificationsIcon />;

  return (
    <>
      <TabsContainer>
        <Tabs
          aria-label="Sample Icon Position Left Tabs"
          iconPosition={TabsIconPosition.left}
        >
          <Tab icon={emailIcon}>First item with a longer text label</Tab>
          <Tab icon={androidIcon}>Second item</Tab>
          <Tab icon={bellIcon}>Third item</Tab>
        </Tabs>
      </TabsContainer>
      <br />
      <br />
      <br />

      <TabsContainer>
        <Tabs
          aria-label="Sample Icon Position Bottom Tabs"
          iconPosition={TabsIconPosition.bottom}
        >
          <Tab icon={emailIcon}>First item with a longer text label</Tab>
          <Tab icon={androidIcon}>Second item</Tab>
          <Tab icon={bellIcon}>Third item</Tab>
        </Tabs>
      </TabsContainer>

      <br />
      <br />
      <br />

      <TabsContainer>
        <Tabs
          aria-label="Sample Icon Position Right Tabs"
          iconPosition={TabsIconPosition.right}
        >
          <Tab icon={emailIcon}>First item with a longer text label</Tab>
          <Tab icon={androidIcon}>Second item</Tab>
          <Tab icon={bellIcon}>Third item</Tab>
        </Tabs>
      </TabsContainer>
    </>
  );
}

Icon Position (vertical)

Vertical tabs only accept left or right for the iconPosition prop, with left being default. This prop is specified on the Tabs component.

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
  TabsOrientation,
  TabsIconPosition,
  magma,
} from 'react-magma-dom';

import { EmailIcon, AndroidIcon, BellIcon } from 'react-magma-icons';

export function Example() {
  const emailIcon = <EmailIcon />;
  const androidIcon = <AndroidIcon />;
  const bellIcon = <BellIcon />;

  return (
    <TabsContainer>
      <Tabs
        aria-label="Sample Icon Position Right Vertical Tabs"
        iconPosition={TabsIconPosition.right}
        orientation={TabsOrientation.vertical}
      >
        <Tab icon={emailIcon}>First item</Tab>
        <Tab icon={androidIcon}>Second item</Tab>
        <Tab icon={bellIcon}>Third item</Tab>
      </Tabs>

      <TabPanelsContainer>
        <TabPanel>
          <div>Main page</div>
        </TabPanel>
        <TabPanel>
          <div>FAQ</div>
        </TabPanel>
        <TabPanel>
          <div>About us</div>
        </TabPanel>
      </TabPanelsContainer>
    </TabsContainer>
  );
}

Inverse

The isInverse property is an optional boolean, that reverses the colors so that the tabs can better appear on a dark background. The default value is false. It can be applied just to the Tabs (just the navigation), or to the TabsContainer (navigation plus panel content). It can also be applied to the TabPanelsContainer or the individual TabPanel.

With Blue Background

import React from 'react';
import {
  Card,
  CardBody,
  TabsContainer,
  Tabs,
  Tab,
  TabPanelsContainer,
  TabPanel,
} from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <TabsContainer isInverse>
          <Tabs aria-label="Sample Inverse Colors Tabs" isInverse>
            <Tab isInverse>First item</Tab>
            <Tab isInverse>Second item</Tab>
            <Tab isInverse>Third item</Tab>
          </Tabs>
          <TabPanelsContainer isInverse>
            <TabPanel isInverse>
              <div>Main page</div>
            </TabPanel>
            <TabPanel isInverse>
              <div>FAQ</div>
            </TabPanel>
            <TabPanel isInverse>
              <div>About us</div>
            </TabPanel>
          </TabPanelsContainer>
        </TabsContainer>
      </CardBody>
    </Card>
  );
}

With Dark Grey Background

import React from 'react';
import {
  TabsContainer,
  Tabs,
  Tab,
  Card,
  CardBody,
  magma,
} from 'react-magma-dom';

export function Example() {
  return (
    <Card style={{ background: magma.colors.neutral800 }}>
      <CardBody>
        <TabsContainer>
          <Tabs
            aria-label="Sample Inverse Colors On Dark Background Tabs"
            isInverse
            backgroundColor={magma.colors.neutral800}
          >
            <Tab>First item</Tab>
            <Tab>Second item</Tab>
            <Tab>Third item</Tab>
          </Tabs>
        </TabsContainer>
      </CardBody>
    </Card>
  );
}

Custom Component Disclaimer

When using the component props in the Tab component we will disregard anything passed in as children. If you are using Typescript and try to put a component prop and give the Tab children, you will get a TypeError that looks something like this: Types of property 'component' are incompatible. Type 'Element' is not assignable to type 'never'.. This comes from a custom XOR type utility that was created, but we do not have the ability to make the error message clearer.

Tabs Container Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the div element that that wraps the tabs and tab panels.

activeIndex

Description

The index of the current active tab. You can use this for managing state of the tabs component by your custom logic.

Type

number

Default

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

Tabs Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the div element that that wraps the tabs.

alignment

Description

Alignment of the tabs menu

Type

enum, one of:
TabsAlignment.center
TabsAlignment.left
TabsAlignment.right

Default

TabsAlignment.left

aria-label

Description

The text the screen reader will announce that describes your tablist.

Type

string

Default

backgroundColor

Description

Background color for the tabs menu

Type

string

Default

iconPosition

Description

The orientation of icon on Tab

Type

enum, one of:
TabsIconPosition.bottom
TabsIconPosition.left
TabsIconPosition.right
TabsIconPosition.top

Default

TabsIconPosition.left

isFullWidth

Description

If true, the components takes the full width of the screen

Type

boolean

Default

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

onChange

Description

The onChange handler for managing state of Tabs component by your custom logic.

Type

function

Default

orientation

Type

enum, one of:
TabsOrientation.horizontal
TabsOrientation.vertical

Default

TabsOrientation.horizontal

textTransform

Description

Determines whether the tab appears in all-caps

Type

enum, one of:
TabsTextTransform.none
TabsTextTransform.uppercase

Default

TabsTextTransform.uppercase

Tab Props

This component uses forwardRef. The ref is applied to the button element.

All of the standard button attributes can be provided as props and will be applied to the button element that gets rendered.

icon

Description

Icon to display within the component

Type

ReactElement |

Default

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

textTransform

Description

Determines whether the tab appears in all-caps

Type

enum, one of:
TabsTextTransform.none
TabsTextTransform.uppercase

Default

TabsTextTransform.uppercase

TabPanelsContainer Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the div element that that wraps the tab panels.

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

TabPanel Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the div element that that wraps the tab panel content.

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

TabsScrollSpyContainer Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the div element that that wraps the tab panels.

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

TabScrollSpyPanel Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the div element that that wraps the tab panel content.

icon

Type

ReactElement |

Default

tabLabel

Required

Type

string

Default

Design

Components

Patterns

Tabs

Basic Usage

Vertical Tabs

Border Position

Border Position (vertical)

Custom Tab Wrappers

Custom Tabs Logic

Custom Tab OnClick

Disabled Tabs

Alignment

Text Transform

For all Tabs

For a certain Tab

Full Width

Scrollable Tabs

Scrollable Vertical Tabs

ScrollSpy Tabs

Icon

Icon Only

Icon With Text

Vertical Tabs with Icons

Icon Position

Icon Position (vertical)

Inverse

With Blue Background

With Dark Grey Background

Custom Component Disclaimer

Tabs Container Props

Tabs Props

Tab Props

TabPanelsContainer Props

TabPanel Props

TabsScrollSpyContainer Props

TabScrollSpyPanel Props