Tab: Default


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.


class default responsive notes
Tab--is-active false false The React component will apply this automatically when the active prop is true.
    <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>
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 className={this.props.className}>
          {, index) => (
              active={this.state.activeTab === index}
              onClick={() =>
                !(tab.props && tab.props.href) &&
                this.setState({ activeTab: index })
        <hr />

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