Mobile App Toggle

By Rafi

F6
#
button mobile toggle button group flexbox
How do I use This?

A mobile app toggle button style.

HTML
<div class="mobile-app-toggle" data-mobile-app-toggle>
  <button class="button is-active">People</button>
  <button class="button">Tags</button>
</div>

<div class="mobile-app-toggle" data-mobile-app-toggle>
  <button class="button is-active">Posts</button>
  <button class="button">Followers</button>
  <button class="button">Following</button>
</div>


$mobile-app-toggle-radius: rem-calc(10);
$mobile-app-toggle-color: $primary-color;
$mobile-app-toggle-margin-bottom: $global-margin;

.mobile-app-toggle {
  display: flex;
  width: 100%;
  border: 1px solid $mobile-app-toggle-color;
  border-radius: $mobile-app-toggle-radius;
  overflow: hidden;
  margin-bottom: $mobile-app-toggle-margin-bottom;

  .button {
    background: transparent;
    color: $mobile-app-toggle-color;
    margin-bottom: 0;
    flex: 1 0 0;

    &:nth-child(n+1) {
      border-left: 1px solid $mobile-app-toggle-color;
    }

    &.is-active {
      background: $mobile-app-toggle-color;
      color: $white;
    }
  }
}



.mobile-app-toggle {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  border: 1px solid #1779ba;
  border-radius: 0.625rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.mobile-app-toggle .button {
  background: transparent;
  color: #1779ba;
  margin-bottom: 0;
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

.mobile-app-toggle .button:nth-child(n+1) {
  border-left: 1px solid #1779ba;
}

.mobile-app-toggle .button.is-active {
  background: #1779ba;
  color: #fefefe;
}
JS
$('[data-mobile-app-toggle] .button').click(function () {
  $(this).siblings().removeClass('is-active');
  $(this).addClass('is-active');
});

Similar Building Blocks

control

Selectable Card

F6
by Christine Siu
control

Button Group Options

F6
by Rafi
control

Social Icon Buttons

F6
by Rafi