Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Logo Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Typeahead Toast Tooltip
Loaders
Loader LogoLoader EllipsesLoader WaveformLoader
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

Tabs

Usage

import { Tabs, Tab } from '@loomhq/lens'
<Tabs
  tabs={[
    { tabContent: 'First' },
    { tabContent: 'Second', isActive: true },
    { tabContent: 'Third' },
  ]}
/>

Active tab

<Tabs
  tabs={[
    { tabContent: demoText.ordinals[0] },
    { tabContent: demoText.ordinals[1], isActive: true },
  ]}
/>

<Tabs
  tabs={[
    { tabContent: demoText.ordinals[0] },
    { tabContent: demoText.ordinals[1], isActive: true },
  ]}
/>

Scroll offset

Use scrollOffset to allow the Tabs to scroll from edge to edge in narrow screen sizes. Pass the same value used for page side paddings to scrollOffset.

<Tabs
  scrollOffset="var(--livePreviewPadding)"
  tabs={demoText.ordinals.map((title, index) => ({
    tabContent: title,
    isActive: index === 0,
  }))}
/>

<Tabs
  scrollOffset="var(--livePreviewPadding)"
  tabs={demoText.ordinals.map((title, index) => ({
    tabContent: title,
    isActive: index === 0,
  }))}
/>

Full tabs

<Tabs
  hasFullTabs
  tabs={[
    { tabContent: 'Full', isActive: true },
    { tabContent: 'Width' },
    { tabContent: 'Tabs' },
  ]}
/>

<Tabs
  hasFullTabs
  tabs={[
    { tabContent: 'Full', isActive: true },
    { tabContent: 'Width' },
    { tabContent: 'Tabs' },
  ]}
/>

Bottom border

This style is commonly used in full-page layouts, where scrolling may be required. The underline acts as a divider, clearly separating the navigation from the main content and guiding users across the tab options.

<>
  <Tabs
    hasBottomBorder
    tabs={[
      { tabContent: 'First', isActive: true },
      { tabContent: 'Second' },
      { tabContent: 'Third' },
    ]}
  />
  <Spacer bottom="medium"/>
  <Tabs
    hasBottomBorder
    hasFullTabs
    tabs={[
      { tabContent: 'Full', isActive: true },
      { tabContent: 'Width' },
      { tabContent: 'Tabs' },
    ]}
  />
</>

<>
  <Tabs
    hasBottomBorder
    tabs={[
      { tabContent: 'First', isActive: true },
      { tabContent: 'Second' },
      { tabContent: 'Third' },
    ]}
  />
  <Spacer bottom="medium"/>
  <Tabs
    hasBottomBorder
    hasFullTabs
    tabs={[
      { tabContent: 'Full', isActive: true },
      { tabContent: 'Width' },
      { tabContent: 'Tabs' },
    ]}
  />
</>

With icons

<>
  <Tabs
    tabs={[
      { tabContent: 'Tabs', icon: <SvgRecord />, isActive: true },
      { tabContent: 'With', icon: <SvgArrowForward /> },
      { tabContent: 'Icons', icon: <SvgBell /> },
    ]}
  />
  <Spacer bottom="medium"/>
  <Tabs
    tabs={[
      { tabContent: '', icon: <SvgRecord />, isActive: true },
      { tabContent: '', icon: <SvgArrowForward /> },
      { tabContent: '', icon: <SvgBell /> },
    ]}
  />
</>

<>
  <Tabs
    tabs={[
      { tabContent: 'Tabs', icon: <SvgRecord />, isActive: true },
      { tabContent: 'With', icon: <SvgArrowForward /> },
      { tabContent: 'Icons', icon: <SvgBell /> },
    ]}
  />
  <Spacer bottom="medium"/>
  <Tabs
    tabs={[
      { tabContent: '', icon: <SvgRecord />, isActive: true },
      { tabContent: '', icon: <SvgArrowForward /> },
      { tabContent: '', icon: <SvgBell /> },
    ]}
  />
</>

HTML tag

Tabs can be rendered as button or a tags.

<>
  <Tabs
    tabs={[
      { tabContent: 'Tabs', htmlTag: 'a', isActive: true },
      { tabContent: 'With', htmlTag: 'a', href: 'https://www.loom.com' },
      { tabContent: 'A', htmlTag: 'a' },
    ]}
  />
  <Spacer bottom="medium"/>
  <Tabs
    tabs={[
      { tabContent: 'Tabs', isActive: true },
      { tabContent: 'With' },
      { tabContent: 'Button' },
    ]}
  />
</>

<>
  <Tabs
    tabs={[
      { tabContent: 'Tabs', htmlTag: 'a', isActive: true },
      { tabContent: 'With', htmlTag: 'a', href: 'https://www.loom.com' },
      { tabContent: 'A', htmlTag: 'a' },
    ]}
  />
  <Spacer bottom="medium"/>
  <Tabs
    tabs={[
      { tabContent: 'Tabs', isActive: true },
      { tabContent: 'With' },
      { tabContent: 'Button' },
    ]}
  />
</>

Examples

With useState

() => {
  const tabs = [
    {title: 'First', content: 'First content'},
    {title: 'Second', content: 'Second content'},
    {title: 'Third', content: 'Third content'},
  ]
  const [activeTab, setActiveTab] = React.useState(tabs[0])
  const tabsConfig = tabs.map((tab) => ({
    tabContent: tab.title,
    isActive: tab.title === activeTab.title,
    onClick: () => setActiveTab(tab),
  }))

return (

<>
  <Tabs tabs={tabsConfig} />
  <Spacer bottom="medium" />
  <Container borderSide="all" padding="medium">
    {activeTab.content}
  </Container>
</>
) }

() => {
  const tabs = [
    {title: 'First', content: 'First content'},
    {title: 'Second', content: 'Second content'},
    {title: 'Third', content: 'Third content'},
  ]
  const [activeTab, setActiveTab] = React.useState(tabs[0])
  const tabsConfig = tabs.map((tab) => ({
    tabContent: tab.title,
    isActive: tab.title === activeTab.title,
    onClick: () => setActiveTab(tab),
  }))

return (

<>
  <Tabs tabs={tabsConfig} />
  <Spacer bottom="medium" />
  <Container borderSide="all" padding="medium">
    {activeTab.content}
  </Container>
</>
) }

Pilled Tabs

Use isPilledDesign to use the pilled design for tabs.

isPilledDesign will always default in hasFullTabs = true.

() => {
  const tabs = [
    {title: 'First', content: 'First content'},
    {title: 'Second', content: 'Second content'},
    {title: 'Third', content: 'Third content'},
  ]
  const [activeTab, setActiveTab] = React.useState(tabs[0])
  const tabsConfig = tabs.map((tab) => ({
    tabContent: tab.title,
    isActive: tab.title === activeTab.title,
    onClick: () => setActiveTab(tab),
  }))

return (

<>
  <Tabs isPilledDesign tabs={tabsConfig} />
  <Spacer bottom="medium" />
  <Container borderSide="all" padding="medium">
    {activeTab.content}
  </Container>
</>
) }

() => {
  const tabs = [
    {title: 'First', content: 'First content'},
    {title: 'Second', content: 'Second content'},
    {title: 'Third', content: 'Third content'},
  ]
  const [activeTab, setActiveTab] = React.useState(tabs[0])
  const tabsConfig = tabs.map((tab) => ({
    tabContent: tab.title,
    isActive: tab.title === activeTab.title,
    onClick: () => setActiveTab(tab),
  }))

return (

<>
  <Tabs isPilledDesign tabs={tabsConfig} />
  <Spacer bottom="medium" />
  <Container borderSide="all" padding="medium">
    {activeTab.content}
  </Container>
</>
) }

Disabled Tabs

Use disabled styling to show tabs that are not currently available. Only the first tab is enabled in this example.

() => {
  const tabs = [
    {title: 'Tab One', content: 'Tab One Content', enabled: true},
    {title: 'Tab Two', content: 'Tab Two Content', enabled: true},
    {title: 'Tab Three', content: 'Tab Three Content', enabled: false},
    {title: 'Tab Four', content: 'Tab Four Content', enabled: false},
  ]
  const [activeTab, setActiveTab] = React.useState(tabs[0])
  const tabsConfig = tabs.map((tab) => ({
    tabContent: <Text fontWeight="bold">{tab.title}</Text>,
    isActive: tab.title === activeTab.title && tab.enabled,
    isDisabled: !tab.enabled,
    onClick: () => tab.enabled && setActiveTab(tab),
  }))

return (

<>
  <Tabs isPilledDesign tabs={tabsConfig} />
  <Spacer bottom="medium" />
  <Container borderSide="all" padding="medium">
    {activeTab.content}
  </Container>
</>
) }

() => {
  const tabs = [
    {title: 'Tab One', content: 'Tab One Content', enabled: true},
    {title: 'Tab Two', content: 'Tab Two Content', enabled: true},
    {title: 'Tab Three', content: 'Tab Three Content', enabled: false},
    {title: 'Tab Four', content: 'Tab Four Content', enabled: false},
  ]
  const [activeTab, setActiveTab] = React.useState(tabs[0])
  const tabsConfig = tabs.map((tab) => ({
    tabContent: <Text fontWeight="bold">{tab.title}</Text>,
    isActive: tab.title === activeTab.title && tab.enabled,
    isDisabled: !tab.enabled,
    onClick: () => tab.enabled && setActiveTab(tab),
  }))

return (

<>
  <Tabs isPilledDesign tabs={tabsConfig} />
  <Spacer bottom="medium" />
  <Container borderSide="all" padding="medium">
    {activeTab.content}
  </Container>
</>
) }

Tabs with tooltips

You can add tooltips to individual tabs by providing tooltipProps to any tab item. This is useful for providing additional context or explanations for tab functionality.

<Tabs
  tabs={[
    {
      tabContent: 'Overview',
      isActive: true,
      tooltipProps: {
        content: 'View general information and statistics'
      }
    },
    {
      tabContent: 'Settings',
      tooltipProps: {
        content: 'Configure your preferences and options',
        placement: 'top'
      }
    },
    {
      tabContent: 'Help',
      icon: <SvgRecord />,
      tooltipProps: {
        content: 'Get help and support resources',
        placement: 'bottom'
      }
    },
  ]}
/>

<Tabs
  tabs={[
    {
      tabContent: 'Overview',
      isActive: true,
      tooltipProps: {
        content: 'View general information and statistics'
      }
    },
    {
      tabContent: 'Settings',
      tooltipProps: {
        content: 'Configure your preferences and options',
        placement: 'top'
      }
    },
    {
      tabContent: 'Help',
      icon: <SvgRecord />,
      tooltipProps: {
        content: 'Get help and support resources',
        placement: 'bottom'
      }
    },
  ]}
/>

With React Router

Use React Router Link components as tabContent. Additionally add tabIndex=-1 and onClick as shown below to ensure keyboard support.

import { Link, useHistory } from "react-router-dom"
const history = useHistory();

<Tabs
  tabs={[
    {
      tabContent: <Link tabIndex={-1} to="/">Home</Link>,
      isActive: true,
      onClick: () => history.push("/"),
      tabIndex={-1}
    },
    {
      tabContent: <Link to="/about">About</Link>,
      htmlTag: "span",
      onClick: () => history.push("/about"),
      tabIndex={-1}
    },
  ]}
/>

Deprecated - Legacy Tab Structure

This legacy approach to defining tabs is deprecated and should not be used in new code. The structure shown below does not meet accessibility standards and lacks proper keyboard navigation and screen reader support.

Previously, we exposed both <Tabs> and <Tab> components and allowed developers to manually structure the tab layout. This approach has been deprecated in favor of the current tabs prop pattern, which ensures proper accessibility and consistent behavior across all implementations.

() => {
  const tabs = [
    {title: 'First', content: 'First content'},
    {title: 'Second', content: 'Second content'},
    {title: 'Third', content: 'Third content'},
  ]
  const [activeTab, setActiveTab] = React.useState(tabs[0])
  return (
    <>
      <Tabs>
        {tabs.map((tab, index) => (
          <Tab
            key={index}
            isActive={tab.title === activeTab.title}
            onClick={() => setActiveTab(tab)}
          >
            {tab.title}
          </Tab>
        ))}
      </Tabs>
      <Spacer bottom="medium"/>
      <Container
        borderSide="all"
        padding="medium"
      >
        {activeTab.content}
      </Container>
    </>
  )
}

() => {
  const tabs = [
    {title: 'First', content: 'First content'},
    {title: 'Second', content: 'Second content'},
    {title: 'Third', content: 'Third content'},
  ]
  const [activeTab, setActiveTab] = React.useState(tabs[0])
  return (
    <>
      <Tabs>
        {tabs.map((tab, index) => (
          <Tab
            key={index}
            isActive={tab.title === activeTab.title}
            onClick={() => setActiveTab(tab)}
          >
            {tab.title}
          </Tab>
        ))}
      </Tabs>
      <Spacer bottom="medium"/>
      <Container
        borderSide="all"
        padding="medium"
      >
        {activeTab.content}
      </Container>
    </>
  )
}

Props

Tabs

name

type

default

scrollOffset

number | string

hasFullTabs

boolean

children

React.ReactNode

tabs

TabItem[]

isPilledDesign

boolean

hasBottomBorder

boolean

Deprecated - Tab

name

type

default

htmlTag

'a' | 'button' | 'span'

'button'

isDisabled

boolean

false

isActive

boolean

icon

React.ReactNode

children

React.ReactNode

isPilledDesign

boolean

Guides

Styles

Components

Loaders

Layout

Icons

Illustrations

Patterns

Utilities

Playground

Tabs

Usage

Active tab

Scroll offset

Full tabs

Bottom border

With icons

HTML tag

Examples

With useState

Pilled Tabs

Disabled Tabs

Tabs with tooltips

With React Router

Deprecated - Legacy Tab Structure

Props

Tabs

Deprecated - Tab