KSS Style Guide

Button Icon

Toggle example guides Toggle HTML markup

4 types of default buttons atoms

<insert-markup>blocks.buttons.icon-</insert-markup>
.-large
larger version
<insert-markup>blocks.buttons.icon-0</insert-markup>
.-outline
Outlined button
<insert-markup>blocks.buttons.icon-1</insert-markup>
.-round
ROunded button
<insert-markup>blocks.buttons.icon-2</insert-markup>
Markup: ..\..\styleguide\templates\atoms\buttons-icon.html 
<a href="#" class="rocksite-a-button-icon [modifier class]">

	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
		<path fill="#fff" d="M11.25 3.75v7.5h-7.5v1.5h7.5v7.5h1.5v-7.5h7.5v-1.5h-7.5v-7.5h-1.5z"/>
	</svg>

</a>
Source: ../source/sass/05-blocks/button/_style.scss, line 64