Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Tabs

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Uncontrolled usage

Any Paragon component or export may be added to the code example.

<Tabs

  variant="tabs"

  defaultActiveKey="profile"

  id="uncontrolled-tab-example"

>

  <Tab eventKey="home" title="Home">

    Hello I am the first panel.

  </Tab>

  <Tab eventKey="profile" title="Profile">

    Hello I am the second panel.

  </Tab>

  <Tab eventKey="contact" title="Contact" disabled>

    Hello I am third first panel.

  </Tab>

</Tabs>

Controlled usage

Any Paragon component or export may be added to the code example.

() => {

  const [key, setKey] = useState('home');



  return (

    <Tabs

      id="controlled-tab-example"

      activeKey={key}

      onSelect={(k) => setKey(k)}

    >

      <Tab eventKey="home" title="Home">

        Hello I am the first panel.

      </Tab>

      <Tab eventKey="profile" title="Profile">

        Hello I am the second panel.

      </Tab>

      <Tab eventKey="contact" title="Contact" disabled>

        Hello I am third first panel.

      </Tab>

    </Tabs>

  );

}

Button group usage

Any Paragon component or export may be added to the code example.

<Tabs

  defaultActiveKey="profile"

  id="uncontrolled-pills-tab-example"

  variant="button-group"

>

  <Tab eventKey="home" title="Home">

    Hello I am the first panel.

  </Tab>

  <Tab eventKey="profile" title="Profile">

    Hello I am the second panel.

  </Tab>

  <Tab eventKey="contact" title="Contact" disabled>

    Hello I am third first panel.

  </Tab>

</Tabs>

Pills usage

Any Paragon component or export may be added to the code example.

<Tabs

  defaultActiveKey="profile"

  id="uncontrolled-pills-tab-example"

  variant="pills"

>

  <Tab eventKey="home" title="Home">

    Hello I am the first panel.

  </Tab>

  <Tab eventKey="profile" title="Profile">

    Hello I am the second panel.

  </Tab>

  <Tab eventKey="contact" title="Contact" disabled>

    Hello I am third first panel.

  </Tab>

</Tabs>

Inverse-Pills usage

Any Paragon component or export may be added to the code example.

<Stack className="bg-dark-700 p-4">

  <Tabs

    variant="inverse-pills"

    defaultActiveKey="profile"

    id="uncontrolled-pills-tab-example"

  >

    <Tab eventKey="home" title="Home">

      Hello I am the first panel.

    </Tab>

    <Tab eventKey="profile" title="Profile">

      Hello I am the second panel.

    </Tab>

    <Tab eventKey="contact" title="Contact" disabled>

      Hello I am third first panel.

    </Tab>

  </Tabs>

</Stack>

Inverse Tabs usage

Any Paragon component or export may be added to the code example.

<Stack className="bg-dark-700 p-4">

  <Tabs

    variant="inverse-tabs"

    defaultActiveKey="profile"

    id="uncontrolled-pills-tab-example"

  >

    <Tab eventKey="home" title="Home">

      Hello I am the first panel.

    </Tab>

    <Tab eventKey="profile" title="Profile">

      Hello I am the second panel.

    </Tab>

    <Tab eventKey="contact" title="Contact" disabled>

      Hello I am third first panel.

    </Tab>

  </Tabs>

</Stack>

With notification

Any Paragon component or export may be added to the code example.

<Tabs defaultActiveKey="profile" id="tab-example-with-notification">

  <Tab eventKey="home" title="Home">

    Hello I am the first panel.

  </Tab>

  <Tab eventKey="profile" title="Profile" notification={1}>

    Hello I am the second panel.

  </Tab>

</Tabs>

With screen reader text in notification

Any Paragon component or export may be added to the code example.

<Tabs defaultActiveKey="profile" id="tab-example-with-sr-notification">

  <Tab eventKey="home" title="Home">

    Hello I am the first panel.

  </Tab>

  <Tab

    eventKey="profile" 

    title="Profile" 

    notification={(

      <span>

        1

        <span className="sr-only">notification</span>

      </span>

    )}

  >

    Hello I am the second panel.

  </Tab>

</Tabs>

Responsive support

Any Paragon component or export may be added to the code example.

<Tabs

  variant="tabs"

  defaultActiveKey="profile"

  id="uncontrolled-tab-example"

>

  <Tab eventKey="home" title="Home">

    Hello I am the first panel.

  </Tab>

  <Tab eventKey="dashboard" title="Dashboard">

    Hello I am the second panel.

  </Tab>

  <Tab eventKey="profile" title="Profile" notification={1}>

    Hello I am the third panel.

  </Tab>

  <Tab eventKey="products" title="Products">

    Hello I am the fourth panel.

  </Tab>

  <Tab eventKey="help" title="Help">

    Hello I am the fifth panel.

  </Tab>

  <Tab eventKey="about" title="About">

    Hello I am the sixth panel.

  </Tab>

  <Tab eventKey="updates" title="Updates">

    Hello I am the seventh panel.

  </Tab>

  <Tab eventKey="forum" title="Forum">

    Hello I am the eighth panel.

  </Tab>

  <Tab eventKey="job" title="Job">

    Hello I am the ninth panel.

  </Tab>

  <Tab eventKey="team" title="Our team">

    Hello I am the tenth panel.

  </Tab>

</Tabs>

Tabs.Deprecated


(Deprecated) basic usage

Any Paragon component or export may be added to the code example.

<Tabs.Deprecated

  labels={[

    'Panel 1',

    'Panel 2',

    'Panel 3'

  ]}

>

  <div>Hello I am the first panel</div>

  <div>Hello I am the second panel</div>

  <div>Hello I am the third panel</div>

</Tabs.Deprecated>

Theme Variables (SCSS)#

$tab-notification-height:                                    1rem !default;
$tab-notification-width:                                     1rem !default;
$tab-notification-font-size:                                 $font-size-xs !default;
$tab-more-link-dropdown-toggle-padding-x:                    .7rem !default;
$tab-more-link-dropdown-toggle-padding-y:                    $spacer !default;
$tab-more-link-dropdown-toggle-focus-bg:                     $primary-500 !default;
$tab-more-link-dropdown-toggle-focus-border-color:           $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-more-link-dropdown-toggle-focus-color:                  $white !default;
$tab-more-link-dropdown-toggle-btn-focus-color:              $tab-more-link-dropdown-toggle-focus-color !default;
$tab-more-link-dropdown-toggle-btn-focus-border-color:       $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-more-link-dropdown-toggle-active-color:                 $tab-more-link-dropdown-toggle-focus-color !default;
$tab-more-link-dropdown-toggle-hover-color:                  $tab-more-link-dropdown-toggle-focus-bg !default;
$tab-inverse-pills-link-dropdown-toggle-padding-x:           .625rem !default;
$tab-inverse-pills-link-dropdown-toggle-padding-y:           $spacer !default;
$tab-inverse-pills-link-dropdown-toggle-focus-bg:            $white !default;
$tab-inverse-pills-link-dropdown-toggle-focus-color:         $primary-500 !default;
$tab-inverse-pills-link-dropdown-toggle-active-color:  $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
$tab-inverse-pills-link-dropdown-toggle-active-hover-color:  $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
$tab-inverse-pills-link-dropdown-toggle-active-hover-bg:     $primary-300 !default;
$tab-inverse-tabs-link-dropdown-toggle-padding-x:            .625rem !default;
$tab-inverse-tabs-link-dropdown-toggle-padding-y:            $spacer !default;
$tab-inverse-tabs-link-dropdown-toggle-hover-bg:             transparent !default;

Props API#

Tabs Props API
  • labels node[] Required

    specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing <Tabs> </Tabs> tags.

  • children element[] Required

    specifies the list of headings that will appear on all of the tabs that will be created.

Tab Props API
  • title node Required

    Specifies the Tab navigation title.

  • notification node

    Specifies notification bubble content. It appears on the top right of the Tab.

  • disabled bool

    Specifies whether Tab is disabled.

  • eventKey string | number

    A unique identifier for the Component, the eventKey makes it distinguishable from others in a set. Similar to React's key prop, in that it only needs to be unique amongst the Components siblings, not globally.

  • tabClassName string

    Specifies class name to append to the base element.

Usage Insights#

Tab

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.312
frontend-app-authn20.36.26
frontend-app-learner-portal-enterprise20.36.04
frontend-app-learner-portal-programs20.28.41
frontend-app-support-tools20.26.010
prospectus20.32.32

Tabs

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.35
frontend-app-authn20.36.25
frontend-app-learner-portal-enterprise20.36.01
frontend-app-learner-portal-programs20.28.41
frontend-app-support-tools20.26.03
prospectus20.32.31
Leave feedback

Contents

All components (A-Z)