ETR Component Library

button-group: Default 

<div class="inline-flex">
    <button class="rounded-l bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">Option 1</button>
    <button class="bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">Option 2</button>
    <button class="bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">Option 3</button>
    <button class="bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">Option 4</button>
    <button class="bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">Option 5</button>
    <button class="rounded-r bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest py-2 px-6 border-r border-white">Option 6</button>
</div>
 
<div class="inline-flex">
 <button class="rounded-l bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">{{tab-1}}</button>
 <button class="bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">{{tab-2}}</button>
 <button class="bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">{{tab-3}}</button>
 <button class="bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">{{tab-4}}</button>
 <button class="bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest transition py-2 px-6 border-r border-white">{{tab-5}}</button>
 <button class="rounded-r bg-gray-light hover:bg-gray font-bold text-gray-darker hover:text-gray-darkest py-2 px-6 border-r border-white">{{tab-6}}</button>
</div>
 
{
  "modifier": "default",
  "tab-1": "Option 1",
  "tab-2": "Option 2",
  "tab-3": "Option 3",
  "tab-4": "Option 4",
  "tab-5": "Option 5",
  "tab-6": "Option 6"
}
  • Content: 
    .button-group {
  @apply .text-gray-darkest .bg-transparent ;
  &__radio {
    clip: rect(0 0 0 0);
    overflow: hidden;
    height: 1px;
    margin: -1px;
    position: absolute;
    width: 1px;
      }
  &__item {
    @apply .py-4 .w-32 .text-center;

  }
}

.button-group__radio:checked + .button-group__item{
  @apply .border-b-4 .border-teal .font-bold;
}
  • URL: /components/raw/button-group/button-group.scss
  • Filesystem Path: components/05-layout-components/button-group/button-group.scss
  • Size: 363 Bytes

There are no notes for this item.