Tab: Default

Props

name type default ignored when active description
active boolean false When true, the tab will appear in the active style and be rendered as a span instead of a anchor
className string Additional classes to apply to the Tab for custom styling. The component will automatically apply the Tab and Tab--is-active classes.
href string # yes For linking the somewhere
onClick callback yes Called when an inactive Tab is clicked. Can be used to change the active prop, if desired.

Modifiers

class default responsive notes
Tab--is-active false false The React component will apply this automatically when the active prop is true.
<div>
    <p>Tab components inherit their font style from their ancestors. In this example, the parent has the .h5 class.</p>
    <div class="h5"><span class="Tab Tab--is-active">First tab</span><a class="Tab" href="#">Second tab</a>
    </div>
    <hr/>
</div>
import * as React from 'react';
import Tab from './tab.jsx';

class TabExample extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = { activeTab: 0 };
  }

  render() {
    return (
      <div>
        <p>{this.props.description}</p>
        <div className={this.props.className}>
          {this.props.tabs.map((tab, index) => (
            <Tab
              key={index}
              active={this.state.activeTab === index}
              onClick={() =>
                !(tab.props && tab.props.href) &&
                this.setState({ activeTab: index })
              }
              {...tab.props}
            >
              {tab.name}
            </Tab>
          ))}
        </div>
        <hr />
      </div>
    );
  }
}

export default TabExample;
{
  "description": "Tab components inherit their font style from their ancestors. In this example,\nthe parent has the .h5 class.",
  "className": "h5",
  "tabs": [
    {
      "name": "First tab"
    },
    {
      "name": "Second tab"
    }
  ]
}
  • Content:
    .Tab {
      display: inline-block;
    
      &:not(:last-child) {
        margin-right: 1em / $modular-scale-proportion;
      }
    }
    
    .Tab--is-active {
      border-bottom: 2px solid $black;
    }
    
  • URL: /components/raw/tab/_tab.scss
  • Filesystem Path: library/components/tab/_tab.scss
  • Size: 169 Bytes