Tabs

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

Uncontrolled usage

Controlled usage

Button group usage

Pills usage

With notification


Tabs.Deprecated


Basic usage

Theme Variables (SCSS)#

$tab-notification-height: 1rem !default;
$tab-notification-width: 1rem !default;
$tab-notification-font-size: $font-size-xs !default;
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.