Tabs

Tabs are used to organize content by grouping similar information on the same page.

#Default

Use tabs when the content is related and people switch between it often.

7 reps are on shift.

import { Tabs } from '@wolf-rayet/react';

<Tabs
  label="Queue views"
  items={[
    { id: 'shift', label: 'On shift', content: <p style={{ margin: 0 }}>7 reps are on shift.</p> },
    { id: 'break', label: 'On break', content: <p style={{ margin: 0 }}>2 reps are on break.</p> },
    { id: 'off', label: 'Off shift', content: <p style={{ margin: 0 }}>4 reps are off shift.</p> },
  ]}
/>

#Disabled

Disable a tab when its content is unavailable.

18 conversations resolved.

import { Tabs } from '@wolf-rayet/react';

<Tabs
  label="Reports"
  items={[
    { id: 'today', label: 'Today', content: <p style={{ margin: 0 }}>18 conversations resolved.</p> },
    { id: 'week', label: 'This week', content: <p style={{ margin: 0 }}>112 conversations resolved.</p> },
    { id: 'year', label: 'This year', content: null, isDisabled: true },
  ]}
/>