<div class="button-group">
    <button class="button button-simple">
Submit
</button>

    <button class="button button-simple action-alert">
Submit
</button>

    <button class="button button-simple action-warning">
Submit
</button>

</div>
<div class="button-group">
    {{ render "@button-simple--button" }}
    {{ render "@button-action--button-alert" }}
    {{ render "@button-action--button-warning" }}
</div>
{
  "text": "Button!"
}
  • Content:
    .button-group {
      display: flex;
    }
    
    .button-group .button:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
    
    .button-group .button:first-child:not(:last-child) {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right: none;
    }
    
    .button-group .button:last-child:not(:first-child) {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-left: none;
    }
    
    
    
  • URL: /components/raw/button-group/button-group.scss
  • Filesystem Path: src/components/13-navigation/01-buttons/02-molecules/01-button-group/button-group.scss
  • Size: 418 Bytes

There are no notes for this item.