BUNN Logo Horizontal

Button Bars

Button Bar

Button Text Button Text Button Text Button Text 
<div class="btn-bar">
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary active">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
</div>

Scrolling Button Bars

Button Text Button Text Button Text Button Text 
<div class="btn-bar btn-bar--scroll">
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary active">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
</div>
Button Text Button Text Button Text Button Text 
<div class="btn-bar btn-bar--flush btn-bar--scroll">
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary active">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
</div>

Centered Button Bar

Button Text Button Text Button Text Button Text 
<div class="btn-bar justify-center">
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary active">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
</div>

Outline buttons

Button Text Button Text Button Text Button Text 
<div class="btn-bar btn-bar--outline">
	<a href="" class="btn btn--outline">Button Text</a>
	<a href="" class="btn btn--outline active">Button Text</a>
	<a href="" class="btn btn--outline">Button Text</a>
	<a href="" class="btn btn--outline">Button Text</a>
</div>

Stroke buttons

Button Text Button Text Button Text Button Text 
<div class="btn-bar btn-bar--stroke">
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke active">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
</div>

Full width

Button Text Button Text Button Text Button Text 
<div class="btn-bar btn-bar--full">
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
</div>

Flush edges (no rounded buttons)

Tip: Great for using with Panels. See examples using panels below.

Button Text Button Text Button Text Button Text 
<div class="btn-bar btn-bar--flush">
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
	<a href="" class="btn btn--primary">Button Text</a>
</div>

Works with single buttons too

Button Text 
<div class="btn-bar btn-bar--flush">
	<a href="" class="btn btn--primary">Button Text</a>
</div>

Use with Panels

Panel Header
I'm a panel section
Button Text Button Text Button Text Button Text 
<div class="panel panel--stroke">
	<div class="panel__header">
		Panel Header
	</div>
	<div class="panel__section">
		I'm a panel section
	</div>
</div>
<div class="btn-bar btn-bar--flush btn-bar--stroke -mt-px">
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
</div>
Panel Header
I'm a panel section
Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text 
<div class="panel panel--stroke">
	<div class="panel__header">
		Panel Header
	</div>
	<div class="panel__section">
		I'm a panel section
	</div>
</div>
<div class="btn-bar btn-bar--flush btn-bar---scroll btn-bar--stroke -mt-px">
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
	<a href="" class="btn btn--stroke">Button Text</a>
</div>