Components

Tabs

Tabs are used to navigate between related pages or views while retaining context.

The tab component renders a set of Tab Button components.

import { Tabs } from '@sproutsocial/racine'
() => {
const [selectedId, setSelectedId] = useState('notifications')
return (
<Tabs
selectedId={selectedId}
onSelect={selected => setSelectedId(selected)}
>
<Tabs.Button id='notifications'>
<Box px={500} display='flex' alignItems='center'>
<Text size='300' weight='600'>Notifications</Text>
</Box>
</Tabs.Button>
<Tabs.Button id='issues'>
<Box px={500} display='flex' alignItems='center'>
<Text size='300' weight='600'>Issues</Text>
</Box>
</Tabs.Button>
</Tabs>
)
}

Properties

NameTypeDefaultDescriptionRequired?
childrenReact.Node
onSelect(string) => void
fullWidthboolean
Whether or not the tabs should stretch to fill the width of their container
qa{ [string]: string }
selectedIdstring
ID of the selected tab

Subcomponents

Tab Button

A tab button must be rendered within an instance of the Tabs component.

<Tabs>
<Tabs.Button>
<Text px={500}>Test</Text>
</Tabs.Button>
</Tabs>
NameTypeDefaultDescriptionRequired?
childrenReact.Node
idstring
Should be unique among sibling elements