Buttons

.a-button

Overview

Description

Buttons are links that have a greater visual weight. They are used to draw the users attention to important actions.

Best Practices

Try and limit buttons to no more than 2 within a content section.
When using multiple buttons together, one should be a primary button, one should be secondary.

Schema

Name	Description	Type	Default Value	Option(s)
button.modifier_classes	Specifies modifier classes. All class names should follow the ABEM methodology.	`string`	-	`a-button--primary` `a-button--secondary` `any`
button.button_wrapper	If `true`, wraps each button component with a span. `true` is passed by the Button Group component.	`boolean`	`false`	`true` `false`
button.type	Specifies the type of button for a button element.	`string`	`button`	`button` `submit` `reset`
button.text	Specifies the text of the button.	`string`	-	`any`
button.url	The href attribute for the button when the element is a link; specifies the URL of the page the link goes to. If no url is provided, the button element is a button.	`string`	-	`any`
button.aria_label	The aria-label attribute is used to define a string that labels the current button.	`string`	-	`any`

Primary Button

.a-button--primary

Description

Used for primary actions, ideally one per content area. If there are multiple buttons, use one primary button and leave the rest secondary buttons.

Colors Used

Name	Hex	Variable	Usage
White	#fefefe	$color--white;	Text color
Blue	#007dba	$color--blue;	Background color
Periwinkle	#3a5dae	$color--periwinkle;	Hover background color

Example

Button Link

Secondary Button

.a-button--secondary

Description

Used for secondary actions, use as many per content area as needed. If there are multiple buttons, use one primary button and the rest secondary buttons.

Colors Used

Name	Hex	Variable	Usage
White	#fefefe	$color--white;	Background color
Blue	#007dba	$color--blue;	Border and text color
Periwinkle	#3a5dae	$color--periwinkle;	Hover border and background color

Example

Button Link