Dealogic Styleguide

section menu

Button Group

A button group is a grouping of multiple 'neutral' buttons. You may not use progressive, negative or positive buttons in a group. Interactivity of buttons within a group (for example: usage as a radio-style toggle) should be handled app-side.

Examples

Button label Button label
Button label Button label Button label
Button label Button label Button label Button label 
<div class="dl-buttongroup">
  <dl-button selected>Button label</dl-button>
  <dl-button>Button label</dl-button>
</div>

<div class="dl-buttongroup">
  <dl-button>Button label</dl-button>
  <dl-button>Button label</dl-button>
  <dl-button selected>Button label</dl-button>
</div>

<div class="dl-buttongroup">
  <dl-button>Button label</dl-button>
  <dl-button>Button label</dl-button>
  <dl-button selected>Button label</dl-button>
  <dl-button>Button label</dl-button>
</div>