First Second Third Fourth
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>
<Link to="/">
<Tab htmlTag="span" isActive>Home</Tab>
</Link>
<Link to="/about">
<Tab htmlTag="span">About</Tab>
</Link>
</Tabs>
Props
Tabs
hasBottomBorder
boolean
false
scrollOffset
number | string
Tab
htmlTag
'a' | 'button' | 'span'
'button'