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`