Usage

import { Tabs, Tab } from '@loomhq/lens'
<Tabs>
  <Tab onClick={() => {}}>First</Tab>
  <Tab onClick={() => {}} isActive>Second</Tab>
  <Tab onClick={() => {}}>Third</Tab>
</Tabs>

Active tab

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.

Full tabs

With icons

HTML tag

Tabs can be rendered as button or a tags.

Examples

With useState

Pilled Tabs

Use isPilledDesign to use the pilled design for tabs.

  • isPilledDesign will always default in hasFullTabs = true.

With React Router

Wrap the Tab component with React Router Link.

import { Link } from "react-router-dom"
<Tabs>
  <Link to="/">
    <Tab htmlTag="span" isActive>Home</Tab>
  </Link>
  <Link to="/about">
    <Tab htmlTag="span">About</Tab>
  </Link>
</Tabs>

Props

Tabs

name
type
default
scrollOffset
number | string
hasFullTabs
boolean
children
React.ReactNode
isPilledDesign
boolean

Tab

name
type
default
htmlTag
'a' | 'button' | 'span'
'button'
isActive
boolean
icon
React.ReactNode
children
React.ReactNode
isPilledDesign
boolean