Icon button

A simple button component with only an icon, used for actions like closing modals. This is a button component and should NOT be used as a link to redirect to other pages.

Animated

px 

			
				<button class="a-icon-button a-icon-button--animated ">
	<span class="a-icon-button__icon icon-cancel"></span>
</button>
<button class="a-icon-button a-icon-button--animated ">
	<span class="a-icon-button__icon icon-arrow-down"></span>
</button>
<button class="a-icon-button a-icon-button--animated ">
	<span class="a-icon-button__icon icon-alert"></span>
</button>

Default

px 

			
				<button class="a-icon-button  ">
	<span class="a-icon-button__icon icon-cancel"></span>
</button>
<button class="a-icon-button  ">
	<span class="a-icon-button__icon icon-arrow-down"></span>
</button>
<button class="a-icon-button  ">
	<span class="a-icon-button__icon icon-alert"></span>
</button>

Inverted

px 

			
				<button class="a-icon-button a-icon-button--inverted ">
	<span class="a-icon-button__icon icon-cancel"></span>
</button>
<button class="a-icon-button a-icon-button--inverted ">
	<span class="a-icon-button__icon icon-arrow-down"></span>
</button>
<button class="a-icon-button a-icon-button--inverted ">
	<span class="a-icon-button__icon icon-alert"></span>
</button>

Documentation

Modifiers

  • a-icon-button--animated

    This class animated component by rotating it. This should not be applied to every item, only when the icon and the animation makes sense. This can be seen as an optional effect. Should definitly not be used with arrows.

  • a-icon-button--inverted

    Invert the background color and color of the button to a more darker version.