Icon Buttons

Regular Button

Default The class sui-button-icon determines the base markup for any button that contains only an icon. 
<button role="button" class="sui-button-icon">
	<span class="sui-icon-close" aria-hidden="true"></span>
	<span class="sui-screen-reader-text">Icon Button</span>
</button>
Outlined This variation adds a border to the button. For those cases you can make use of sui-button-outlined class. 
<button role="button" class="sui-button-icon sui-button-outlined">
	<span class="sui-icon-close" aria-hidden="true"></span>
	<span class="sui-screen-reader-text">Button</span>
</button>
Large There are some cases when you gonna need to make use of bigger buttons, to achieve this you can add sui-button-lg class. 
<button role="button" class="sui-button-icon sui-button-lg">
	<span class="sui-icon-close" aria-hidden="true"></span>
	<span class="sui-screen-reader-text">Button</span>
</button>
Disabled As simple as it sounds, you can add disabled attribute to button element or disabled class if you are using link element.

Regular Button:

Outlined Button:

Large Button:

<!--
	NOTE: Use `disabled` attribute for button element.
-->
<button role="button" class="sui-button-icon" disabled>
	<span class="sui-icon-close" aria-hidden="true"></span>
	<span class="sui-screen-reader-text">Disabled Button</span>
</button>

<!--
	NOTE: Use `disabled` class for a (link) element.
-->
<a role="button" class="sui-button-icon disabled">
	<span class="sui-icon-close" aria-hidden="true"></span>
	<span class="sui-screen-reader-text">Disabled Button</span>
</a>