Tabs

import Tabs from 'frui/Tabs';

Copy

Props

Tabs Props

Name	Type	Required	Notes
vertical	boolean	No	Displays tabs vertically (default: false)
scrollable	boolean	No	Enables horizontal scrolling (default: false)
centered	boolean	No	Centers tabs horizontally (default: false)
fullWidth	boolean	No	Makes tabs full-width (default: false)
wrap	boolean	No	Allows tab labels to wrap instead of truncate (default: false)

TabProps (for each tab in tabs array)

Name	Type	Required	Notes
label	string	Yes	The label displayed on the tab
icon	ReactNode	No	Icon for the tab (optional)
disabled	boolean	No	Disables the tab (default: false)
style	CSS Object	No	Custom CSS styles for the tab
className	string	No	Custom class names for the tab

Basic

A simple example of the Tabs component with three tabs.

Tab 1

Tab 2

Tab 3

Content 1

Content 2

Content 3

<Tabs
  tabs={[
    { label: 'Tab 1' },
    { label: 'Tab 2' },
    { label: 'Tab 3' },
  ]}
  panels={[
    <div key="1">{_('Content for Tab 1')}</div>,
    <div key="2">{_('Content for Tab 2')}</div>,
    <div key="3">{_('Content for Tab 3')}</div>,
  ]}
/>

Copy

Scrollable

Enables horizontal scrolling when there are more tabs than fit in the container.

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Content 1

Content 2

Content 3

Content 4

Content 5

<Tabs
  tabs={[
    { label: 'Tab 1' },
    { label: 'Tab 2' },
    { label: 'Tab 3' },
    { label: 'Tab 4' },
    { label: 'Tab 5' },
  ]}
  panels={[
    <p key="1">{_('Content 1')}</p>,
    <p key="2">{_('Content 2')}</p>,
    <p key="3">{_('Content 3')}</p>,
    <p key="4">{_('Content 4')}</p>,
    <p key="5">{_('Content 5')}</p>,
  ]}
  scrollable
/>

Copy

Disabled

Disables a tab, making it unclickable and visually distinct.

Tab 1

Tab 2

Tab 3

Content 1

Content 2 (disabled)

Content 3

<Tabs
  tabs={[
    { label: 'Tab 1' },
    { label: 'Tab 2', disabled: true },
    { label: 'Tab 3' },
  ]}
  panels={[
    <p key="1">{_('Content 1')}</p>,
    <p key="2">{_('Content 2 (disabled)')}</p>,
    <p key="3">{_('Content 3')}</p>,
  ]}
/>

Copy

Icons

Adds icons to tabs using the icon prop.

Home

User

Settings

Home Content

User Content

Settings Content

<Tabs
  tabs={[
    { label: 'Home', icon: <i className="fas fa-home"></i> },
    { label: 'User', icon: <i className="fas fa-user"></i> },
    { label: 'Settings', icon: <i className="fas fa-cog"></i> },
  ]}
  panels={[
    <p key="1">{_('Home Content')}</p>,
    <p key="2">{_('User Content')}</p>,
    <p key="3">{_('Settings Content')}</p>,
  ]}
/>

Copy

Vertical

Displays tabs vertically instead of horizontally.

Tab 1

Tab 2

Tab 3

Content 1

Content 2

Content 3

<Tabs
  tabs={[
    { label: 'Tab 1' },
    { label: 'Tab 2' },
    { label: 'Tab 3' },
  ]}
  panels={[
    <p key="1">{_('Content 1')}</p>,
    <p key="2">{_('Content 2')}</p>,
    <p key="3">{_('Content 3')}</p>,
  ]}
  vertical
/>

Copy

Centered

Centers the tabs horizontally within the container.

Tab 1

Tab 2

Tab 3

Content 1

Content 2

Content 3

<Tabs
  tabs={[
    { label: 'Tab 1' },
    { label: 'Tab 2' },
    { label: 'Tab 3' },
  ]}
  panels={[
    <p key="1">{_('Content 1')}</p>,
    <p key="2">{_('Content 2')}</p>,
    <p key="3">{_('Content 3')}</p>,
  ]}
  centered
/>

Copy

FullWidth

Makes each tab take the full width of the container.

Tab 1

Tab 2

Tab 3

Content 1

Content 2

Content 3

<Tabs
  tabs={[
    { label: 'Tab 1' },
    { label: 'Tab 2' },
    { label: 'Tab 3' },
  ]}
  panels={[
    <p key="1">{_('Content 1')}</p>,
    <p key="2">{_('Content 2')}</p>,
    <p key="3">{_('Content 3')}</p>,
  ]}
  fullWidth
/>

Copy

Wrap

Allows long tab labels to wrap instead of being truncated.

Tab with a Very Long Label That Needs Wrapping

Tab 2

Tab 3

Content 1

Content 2

Content 3

<Tabs
  tabs={[
    { label: 'Tab with a Very Long Label That Needs Wrapping' },
    { label: 'Tab 2' },
    { label: 'Tab 3' },
  ]}
  panels={[
    <p key="1">{_('Content 1')}</p>,
    <p key="2">{_('Content 2')}</p>,
    <p key="3">{_('Content 3')}</p>,
  ]}
  wrap
/>

Copy

Custom Styles

You can add your own custom class to the alert component or use thefrui-tab frui-tab-active frui-tab-disabled frui-tab-panels CSS class.

Table