Usage
import { Tabs, Tab } from '@loomhq/lens'
<Tabs>
<Tab onClick={() => {}}>First</Tab>
<Tab onClick={() => {}} isActive>Second</Tab>
<Tab onClick={() => {}}>Third</Tab>
</Tabs>
Active tab
<Tabs>
<Tab>{demoText.ordinals[0]}</Tab>
<Tab isActive>{demoText.ordinals[1]}</Tab>
</Tabs>
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)">
{demoText.ordinals.map((title, index) => (
<Tab isActive={index === 0} key={index}>{title}</Tab>
))}
</Tabs>
Full tabs
<Tabs hasFullTabs>
<Tab isActive>Full</Tab>
<Tab>Width</Tab>
<Tab>Tabs</Tab>
</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>
<Tab isActive>First</Tab>
<Tab>Second</Tab>
<Tab>Third</Tab>
</Tabs>
<Spacer bottom="medium"/>
<Tabs hasBottomBorder hasFullTabs>
<Tab isActive>Full</Tab>
<Tab>Width</Tab>
<Tab>Tabs</Tab>
</Tabs>
</>
With icons
<>
<Tabs>
<Tab icon={<SvgRecord />} isActive>Tabs</Tab>
<Tab icon={<SvgArrowForward />}>With</Tab>
<Tab icon={<SvgBell />}>Icons</Tab>
</Tabs>
<Spacer bottom="medium"/>
<Tabs>
<Tab icon={<SvgRecord />} isActive></Tab>
<Tab icon={<SvgArrowForward />}></Tab>
<Tab icon={<SvgBell />}></Tab>
</Tabs>
</>
HTML tag
Tabs can be rendered as button or a tags.
<>
<Tabs>
<Tab htmlTag="a" isActive>Tabs</Tab>
<Tab htmlTag="a" href="https://www.loom.com">With</Tab>
<Tab htmlTag="a">A</Tab>
</Tabs>
<Spacer bottom="medium"/>
<Tabs>
<Tab isActive>Tabs</Tab>
<Tab>With</Tab>
<Tab>Button</Tab>
</Tabs>
</>
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])
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>
</>
)
}
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])
return (
<>
<Tabs isPilledDesign>
{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>
</>
)
}
With React Router
Wrap the Tab component with React Router Link.
import { Link } from "react-router-dom"
<Tabs>
<Tab htmlTag="span" isActive>
<Link to="/">Home</Link>
</Tab>
<Tab htmlTag="span">
<Link to="/about">About</Link>
</Tab>
</Tabs>
Props
Tabs
hasBottomBorder
boolean
false
scrollOffset
number | string
Tab
htmlTag
'a' | 'button' | 'span'
'button'