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.

Props

Tabs

prop
type
default
required
scrollOffset
oneOfType
number
string

Tab

prop
type
default
required
htmlTag
oneOf: 'a', 'button'
'button'
isActive
bool
icon
node