Tabs

Tabs are used to quickly navigate between views within the same context, allowing a user to access different contents without leaving the page.

Best practices

• Labels are concise and use one to two words maximum.
• Use Tabs when the content and structure of the pages are different.
• A maximum of six tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.
• Tabs with related content should be grouped adjacent to each other.
• It's not recommended to use Tabs as filters.

Examples

import { TabItem, Tabs } from '@lemonade/ui'
import React from 'react'

function TabEx() {
  return (
    <Tabs>
      <TabItem onClick={console.log}>First item</TabItem>
      <TabItem onClick={console.log} active>
        Active item
      </TabItem>
      <TabItem onClick={console.log}>Third item</TabItem>
      <TabItem onClick={console.log} disabled>
        Disabled item
      </TabItem>
    </Tabs>
  )
}

export default TabEx