Tab

Tabs allow the user to toggle different sets of content within the same container.

Tab structure

Use a Flexbox component to place tabs in a single row above their associated content. Each tab's label should succinctly describe its corresponding content. You can apply an active state using the is-active modifier class. Exactly one tab must be active at any time.

Tab one Tab two Tab three 
<div class="display-flex">
  <a class="Tab is-active" href="#">Tab one</a>
  <a class="Tab" href="#">Tab two</a>
  <a class="Tab" href="#">Tab three</a>
</div>

Alignment

Tabs can be center-aligned by adding jc-center to the Flexbox container.

Tab one Tab two Tab three 
<div class="display-flex jc-center">
  <a class="Tab is-active" href="#">Tab one</a>
  <a class="Tab" href="#">Tab two</a>
  <a class="Tab" href="#">Tab three</a>
</div>

Tabs can be right-aligned by adding jc-flexEnd to the Flexbox container.

Tab one Tab two Tab three 
<div class="display-flex jc-flexEnd">
  <a class="Tab is-active" href="#">Tab one</a>
  <a class="Tab" href="#">Tab two</a>
  <a class="Tab" href="#">Tab three</a>
</div>

Expanded tabs

You can expand your tabs to fill the full width of their Flexbox container by adding an expanded class to each Tab. Each Tab will have an equal width.

Tab one Tab two Tab three 
<div class="display-flex">
    <a class="Tab expanded is-active" href="#">Tab one</a>
    <a class="Tab expanded" href="#">Tab two</a>
    <a class="Tab expanded" href="#">Tab three</a>
</div>

Tab with Icon

You can add an icon to support the Tab's label and provide visual reinforcement. The icon is wrapped in a div to provide the necessary margin.

Tab one Tab two Tab three 
<div class="display-flex">
  <a class="Tab is-active" href="#">
      <div class="mr-1">
          <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
      </div>
      Tab one
  </a>
  <a class="Tab" href="#">Tab two</a>
  <a class="Tab" href="#">Tab three</a>
</div>

Or you can place the icon on the right-hand side.

Tab one
Tab two Tab three 
<div class="display-flex">
  <a class="Tab is-active" href="#">
      Tab one
      <div class="ml-1">
          <svg class="Icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
      </div>
  </a>
  <a class="Tab" href="#">Tab two</a>
  <a class="Tab" href="#">Tab three</a>
</div>

Tab with Badge

You can add a Badge component to the right of a Tab's label, to highlight a particular Tab.

Tab one
New
Tab two Tab three 
<div class="display-flex">
  <a class="Tab is-active" href="#">
      Tab one
      <div class="ml-1">
          <span class="Badge primary">New</span>
      </div>
  </a>
  <a class="Tab" href="#">Tab two</a>
  <a class="Tab" href="#">Tab three</a>
</div>

Tab with Status

You can add a Status component to the left of a Tab's label, to highlight a particular Tab.

Tab one Tab two Tab three 
<div class="display-flex">
  <a class="Tab is-active" href="#">
      <div class="mr-1">
          <span class="Status primary"></span>
      </div>
      Tab one
  </a>
  <a class="Tab" href="#">Tab two</a>
  <a class="Tab" href="#">Tab three</a>
</div>