Tabs

Components

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>
  )
}

() => {
  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

Name	Type	Description
`children`	`React.Node`
`onSelect`	`(string) => void`
`fullWidth`	`boolean`	Whether or not the tabs should stretch to fill the width of their container
`qa`	`{ [string]: string }`
`selectedId`	`string`	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>

<Tabs>
  <Tabs.Button>
    <Text px={500}>Test</Text>
  </Tabs.Button>
</Tabs>

Name	Type	Default	Description	Required?
`children`	`React.Node`
`id`	`string`		Should be unique among sibling elements