Skip to Content
DocumentationComponentsTabsNext Gen

Tabs

In-page tabs are an intuitive way to present lots of content at once, without overwhelming the viewer. Use tabs only when users don’t need to see content from multiple tabs simultaneously.

Loading...

Overview

Resources

Changelog

Loading...

Source code

Loading...

Ember

Loading...

Storybook

Loading...

Figma

Loading...

Install

yarn add @camp/tabs

Upgrading to Next Gen

🎨 Updated color palette and style refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

🪶 Light weight: Follows a ‘compositional’ approach, enabling users to only pull in the pieces they need to fit their use case.

📏 New size prop: Offers a prop called size, allowing users to optionally add some additional padding / height to the TabTrigger. By default, the size is set to "small".

Previous implementation

Not much has changed in the way of component API / consumption of the Tabs component, aside from the naming of subcomponents that we export.

Both implementations (Camp 1 and Next Gen) rely heavily on the use of the Radix Tabs ‘Primitives’ .

import { Root, List, TriggerAsset, Trigger, Content } from "@activecampaign/camp-components-tabs"
 
<Root>
  <List>
    <Trigger value={"tab 1"}>
      <TriggerAsset>...</TriggerAsset>
      Tab 1
    </Trigger>
    <Trigger value={"tab 2"}>Tab 2</Trigger>
  </TabsList>
 
  <Content value={"tab 1"}>
    Content 1
    </Content>
      <Content value={"tab 2"}>
    Content 2
    </Content>
    ...
</Root>

New implementation

Since we’re just restyling the radix tabs primitive, the composition pattern remains the same as it did in the previous approach.

We’ve added the size prop to the Tabs component, which defaults to "small" if not explicitly specified. This will modify the padding / height for all instances of TabTrigger within the Tabs component.

When the Tabs are in the ‘horizontal’ orientation, the iconAlignment prop can be used to easily position the icon on top of / to the left of the text content.

In the new @camp/tabs, the TriggerAsset component has been deprecated as it’s no longer needed to position the Icon.

import { Tabs, TabLists, TabTrigger, TabContent } from '@camp/tabs';
 
<Tabs size="medium">
  <TabLists>
    <TabTrigger value={'tab 1'}>Tab 1</TabTrigger>
    <TabTrigger value={'tab 2'}>Tab 2</TabTrigger>
  </TabLists>
  <TabContent value={'tab 1'}>Content 1</TabContent>
  <TabContent value={'tab 2'}>Content 2</TabContent>
  ...
</Tabs>;

Migration steps

  1. Update import path: Replace the old tabs imports from @camp/tabs per the section above titled “New Implementation”.
  2. Remove the <TriggerAsset /> component: This is no longer available in the new implementation. You can simply apply margin direcly to the asset / icon directly if you choose to render it within the TabTrigger component.
  3. Specify size prop: This is optional, as the size has a default value of "small" already applied to it. Optionally override the size prop to "medium" if you’d like to add some additional padding / height to the TabTrigger.

Usage

Controlled State / Uncontrolled State

The Tabs component can be used in both controlled and uncontrolled states.

import { Tabs, TabLists, TabTrigger, TabContent } from '@camp/tabs';
import React from 'react';
 
const [value, setValue] = React.useState('tab 1');
 
...
 
<Tabs value={value} onValueChange={(value) => setValue(value)}>
  <TabLists>
    <TabTrigger value={'tab 1'}>Tab 1</TabTrigger>
  ...
</Tabs>;

import { Tabs, TabLists, TabTrigger, TabContent } from '@camp/tabs';
 
<Tabs defaultValue="tab 1">
  <TabLists>
    <TabTrigger value={'tab 1'}>Tab 1</TabTrigger>
  ...
</Tabs>;

Orientation

The Tabs component can be used in both horizontal and vertical orientations.

import { Tabs, TabLists, TabTrigger, TabContent } from '@camp/tabs';
 
<Tabs orientation="vertical">
  <TabLists>
  ...
</Tabs>;
import { Tabs, TabLists, TabTrigger, TabContent } from '@camp/tabs';
 
<Tabs orientation="horizontal">
  <TabLists>
  ...
</Tabs>;

Size

The Tabs component can be used in both small and medium sizes.

import {Tabs, TabLists, TabTrigger, TabContent} from '@camp/tabs';
 
<Tabs size="small">
  <TabLists>
  ...
</Tabs>;
import {Tabs, TabLists, TabTrigger, TabContent} from '@camp/tabs';
 
<Tabs size="medium">
  <TabLists>
  ...
</Tabs>;

Icons

The Tabs component can be used with icons.

Icon Alignment

When the Tabs orientation is ‘horizontal’, the iconAlignment prop can be used to easily specify the alignment of an icon relative to the text.

  • top: Aligns the icon above the text. This should be used only with ‘medium’ sized Icons
import { Tabs, TabLists, TabTrigger, TabContent } from '@camp/tabs';
import { CalendarEventMedium } from '@camp/icons';
import { SemanticColors } from '@camp/tokens';
 
<Tabs iconAlignment="top" orientation="horizontal">
  <TabLists>
    <TabTrigger value="tab 1">
      <CalendarEventMedium fill={SemanticColors['icon-decorative']} title="calendar event" />
      <span>Tab 1</span>
    </TabTrigger>
    <TabTrigger value="tab 2">Tab 2</TabTrigger>
    ...
  </TabLists>
</Tabs>;

  • left: Aligns the icon to the left of the text. This should ideally be used with ‘small’ sized Icons 
import { Tabs, TabLists, TabTrigger, TabContent } from '@camp/tabs';
import { CalendarEventSmall } from '@camp/icons';
import { SemanticColors } from '@camp/theme';
 
<Tabs iconAlignment="left" orientation="horizontal">
  <TabLists>
    <TabTrigger value="tab 1">
      <CalendarEventSmall fill={SemanticColors['icon-decorative']} title="calendar event" />
      <span>Tab 1</span>
    </TabTrigger>
    <TabTrigger value="tab 2">Tab 2</TabTrigger>
    ...
  </TabLists>
</Tabs>;

Disabled

The Tabs component can be used with disabled tabs. To disable a specific Tab, simply pass the disabled prop to a TabTrigger.

import { Tabs, TabLists, TabTrigger } from '@camp/tabs';
 
<Tabs>
  <TabLists>
    ...
    <TabTrigger value="tab 2" disabled>
      Tab 2
    </TabTrigger>
  </TabLists>
</Tabs>;

Best practices

  • Icons in tabs should be sparingly to keep tabs from becoming too busy, but can be helpful in situations where a user may not fully understand the different categories being organized for them with tabs. Left icons are small (12px) in size and top icons are medium (16px) in size. The left icon should be used by default, with the top icon being used in settings where the icon needs more prominence. The tabs in the page header should never use the top icons in tabs.
  • By default, the small (36px) tabs should be used. In page headers, these are the only tabs that should be used.
  • The medium (52px) tabs can be used in situations like modals where it benefits them to have a greater presence, but should overall be used sparingly compared to the small tabs.

Accessibility

per the official Radix documentation, the Tabs component is fully accessible, and adheres to the Tabs WAI-ARIA design pattern .

Keyboard support

  • tab to focus on the first tab
  • tab again to focus on tab content
  • Interactive elements (such as a link or button) within a tab will integrate into the tab order by default
  • When focused on first tab, left or right arrows to navigate between tabs

The Tabs component keyboard interactions are identical to those of the Radix Tabs ‘Primitive’. Reference their official documentation around keyboard interactions  for more details.

Last updated on