Button

Use <a> for navigation, <button> for everything else. Submit/reset buttons are the only exceptions, using <input[type="submit"]> to trigger default browser behaviour associated with submitting form input. Buttons should follow a typographic scale, based on importance and base font-size.

Inverted

px 

			
				<button class="a-button a-button--inverted ">
	<span class="a-button__text">primary button</span>
</button>

Primary

The primary button is the default button and should only be used for the main actions. Only one primary button should be used next to each other when used in a call-to-action context.

px 

			
				<div style="display: flex;">
	<button class="a-button  ">
		<span class="a-button__text">primary button</span>
	</button>
	<button class="a-button  ">
		<span class="a-button__icon a-button__icon--before icon-search"></span>
		<span class="a-button__text">icon before</span>
	</button>
	<button class="a-button  ">
		<span class="a-button__text">icon after</span>
		<span class="a-button__icon a-button__icon--after icon-search"></span>
	</button>
	<button class="a-button  is-disabled">
		<span class="a-button__text">disabled</span>
	</button>
</div>

Round

px 

			
				<button class="a-button a-button--round ">
	<span class="a-button__icon a-button__icon--before icon-facebook"></span>
	<span class="a-button__text"></span>
</button>

Documentation

Modifiers

  • a-button--icon-after

    If you're using an icon and you want to have the icon after the text, you can use this class.

  • a-button--inverted

    This class will give the button a white background and dark text.

  • a-button--round

    Specific use for icons and numbers only. Will turn the button into a nice round button.

  • a-button--hide-text

    Specific for buttons with only icons to give the button content/context