Tabs

O uso de abas é indicado para organizar conteúdos similares em uma mesma página, permitindo que o conteúdo possa ser visualizado sem ter que navegar para outra página.

Boas práticas

• Utilize no máximo duas palavras para o título.
• Utilize abas quando o conteúdo e estrutura das telas forem diferentes.
• Utilize no máximo 6 abas, isso ajuda a manter a interface organizada e reduz a carga cognitiva do usuário.
• Abas com conteúdos relacionados devem ser mantidas próximas uma das outras.
• Não é recomendado utilizar abas como componente de filtro.

Exemplos

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