The button-group component represents a set of button or link components that are aligned to the left and right edges of the container.

Overall usage

  • Used to provide navigation forward and backwards to different URLs or different steps within a form.
  • Can contain button or link components


  • Within the button-group, use link components when sending users to a new URL and button components when allowing users to submit data or to trigger an event.


<div class="button-group">
  <div class="u-float-left">
    <a href="#" class="link--primary">Previous</a>
  <div class="u-float-right">
    <a href="#" class="link--primary">Next</a>