Button

Buttons communicate actions that users can take, containing a call-to-action.

Known issues

Show details

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.

Buttons exist in different sizes and shapes. Be mindful of their hierarchy when creating user interfaces, but also make sure you create an aesthetically pleasing layout and easy to understand and navigate.

Component	Usage	Placement	User action
Primary Button	High emphasis actions. This button can be distinguished by its solid fill and should, always, contain the primary actions of the product.	Inside the container	The user can click the button if not disabled
Secondary Button	Mid emphasis actions. This button type contains important actions, but they aren't the primary actions of the interface.	Same as above	Same as above
Transparent Button	Less-pronounced actions. For instance, in actions like the 'profile editing'.	Same as above	Same as above

Anatomy

Structure

container	---
label	The label should be a call to action. Ence, it should be concise and direct the user to take one single specific action, e.g. "Login", "Add to cart", or "Complete order".
icon	The icon can be placed on the left or right.

Sizes and Spaces

	Sizes vary from xs to xl. Each size corresponds to a specific set of values for the height, paddings and gutter between elements. These values are fixed according to the chosen size, no matter the context or content.
	When the button has only an icon, it has the same height and width and the same paddings all around.
	When there is a label and an icon, whether the icon is placed on the right or the left, there is always an 8px of gutter between the two elements. The text style on the xs button is small_bold. On the rest of the buttons, the text style is medium-small_bold.
	The button can have a fixed width when there is text and an icon. The elements can be set apart (example on the right) or content can be centered (example on the left).
	The button can have a badge on the top/right corner. They are only applied in the primary, secondary, and respective negatives, transparent do not have badgesThe size of the badge varies with the size of the button:XS button - XS badgeS button - S badgeM button - S badgeL button - M badgeXL button - M badgeXS and S badges live 4 px outside of the buttonM badge lives 6 px outside of the button
	The button can have a badge on the top/right corner. They are only applied in the primary, secondary, and respective negatives, transparent do not have badges The size of the badge varies with the size of the button: XS button - XS badge S button - S badge M button - S badge L button - M badge XL button - M badge XS and S badges live 4 px outside of the button M badge lives 6 px outside of the button

Properties

Property	Value	Description
Type	primary secondary transparent	The primary type has a solid fill with the main colour of the theme, for global it's digital-black. The secondary has an outline with the main colour of the theme, for global, it's digital-black. The transparent has is no visibility over the container.
Negative	true false	---
Size	small medium large extra-large	height: 32px, 40px, 48px, and 56px.
State	default hover selected* pressed disable	---
Icon	true false	When set to true, just the icon is shown.
Icon Left	true false	The icon is displayed on the left side of the label.
Icon Right	true false	The icon is displayed on the right side of the label.
Icon Fixed	true false	---
Badge	true false	The Badge is displayed on the top/right side of the component.

*selected state not available on code.

Behaviour

Interaction

	Badges can live in all button Styles ( just icon, just text, text and icon hugged or fixed sizes.In disable buttons the badge changes from a success color to a secondary color.Transparent buttons do not have badges