Buttons are one of the most common UI elements. They make it possible for users to interact with a system and take action by making selections. Buttons are used on forms, website homepages, dialog boxes, and toolbars.

Where this element can be seen?

Element is considered as BT-related one, therefore it can be seen across the whole application, for example, Add To Cart (PDP, PLP), Checkout, My Account, CMS pages, etc.

How should this element be designed?

<aside> ➡️ By default, buttons in ScandiPWA have the following types:

• Outlined (transparent with border). This can be used as a secondary button
  • Contained (filled in). This can be used as a primary button
• Link-like (text only)

Adding additional types is nice, but if they are only used in one place, i.e. in the menu, they can be omitted.

</aside>

<aside> ➡️ Buttons should always have text with 100% line height inside of them.

</aside>

The button should be displayed in the following state:

• Normal state
• Disabled state
• Hovered/focused state
• Containing an icon

<aside> ℹ️ Usually, styling this element takes from-to: 4-5h

</aside>

An example display of the button element

How the design may look like?

Design example 1

Design example 2

How to develop styles for this element?

In ScandiPWA, buttons are not separate React components. Instead, their styles are defined in scandipwa/src/style/abstract/_button.scss and automatically applied to all button elements, as well as elements with the Button class

<aside> ➡️ The button styles use variables defined in scandipwa/src/style/base/_button.scss – if you only need to change simple attributes like color, borders, and padding, you can simply override this file, instead of the entire button style.

</aside>

When styling buttons, you need to understand that they have different states and variations, so that your code covers all possible cases:

• Hover & focus: when a button is focused. A button can receive focus after being clicked, or by "selecting" it with the tab key. You should make it clear when a button has received focus so that the user understands that it can be interacted with. You can use the &:hover, &:focus selector to style this button state.
• Disabled: a button that cannot be clicked. For example, a "submit" button could be disabled if the input is invalid. The styling for a disabled button should reflect that it cannot be interacted with – usually, this is done by reducing contrast, and by ensuring that hover&focus do not affect its shading. Use &[disabled] for styling disabled buttons, and &:not([disabled]) for all other buttons.
• isHollow: a variation of buttons. Instead of being filled with the primary color, the button is outlined and hollow. This can be useful for secondary buttons, or to make the button less distracting. This is a BEM modifier, so you can select it with &_isHollow.
• isWithoutBorder: another variation that reduces the noticeability of the button even further. This is another BEM modifier, &_isWithoutBorder.
• likeLink: buttons can also take the appearance of links, while still performing the function of a button. This is a BEM modifier, &_likeLink.

Note that some of the variations above use the BEM methodology to select elements.

<aside> ➡️ The & stands for the parent selector – in this case a selector for the button.

</aside>

How the implementation may look like?

Implementation example #1

Implementation example #2