Button Bar Pattern

The styling is in "ux-prototype/custom-bootstrap/css/scss/custom-bootstrap/pattern-buttons.scss"

The javascript is in "ux-prototype/custom-bootstrap/js/custom-bootstrap/pattern-buttonbar.js"

Button Bar


This bar should is styled with "class=button-bar". The bar should be sticky (try scrolling down!)

Example

Hyperlink

Code 


<div id= "button-bar" class= "button-bar">
    	 
	<a href= "#" class="btn-lg"> Hyperlink </a>

	<button class="btn btn-secondary button-bar_margin btn-lg">Secondary</button>

	<button class="btn btn-primary button-bar_margin btn-lg">Primary</button>
		
</div>

Button Types

Using a button will follow this similar format where 'yourpage.html' is replaced with the page you want this button to go to, see below for different classes of button styling.: 


<button onclick="location.href='yourpage.html'" class="btn btn-primary">Primary</button>

Primary Button 



class="btn btn-primary btn-lg"

Split Primary Button 



<div class="btn-group">

  <button type="button" class="btn btn-primary">Default Action </button>

  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

    <span class="caret"></span>

    <span class="sr-only"> Toggle Dropdown </span>

  </button>

  <ul class="dropdown-menu" role="menu">

    <li><a href="#"> Action </a></li>

    <li><a href="#"> Another action <a></li>

    <li><a href="#"> Something else here </a></li>

  </ul>

</div>

Secondary Button 



class="btn btn-secondary"

Tertiary Button 



class="btn btn-tertiary"

Button Disabled State 



 <button disabled class="btn btn-primary disabled">Primary</button>