Button Module (Best Practices)
Global
- The button module should always have an attribute
role
with the value 'button'.
Button Primary
- On-Hover: 70% opacity on hover
- Dark: black button, white text
- Light: white button, black text
Button Secondary
- On-Hover: 70% opacity on hover
- Dark: black text black outline
- Light: white text white outline
Module parameters
- type: string, can be either 'button', 'submit' or 'link' (Should default to button)
- If the type is 'button' or 'submit', the whole module will be wrapped inside a
<button></button>
. - If the type is 'link', the whole module will be wrapped inside a
<a></a>
. -
value: string (Should default to Click here, value should be wrapped inside the
<button></button>
and defined as aaria-label
attribute. If the type is 'link', it should also be defined as atitle
attribute) -
id: string (should default to blank, if parameter not provided the button shouldn't have the attribute
id
) -
class: string (should default to blank, if parameter provided it will add additional CSS classe(s) to the attribute
class
) -
name: string (Should default to blank, if parameter not provided the button shouldn't have the attribute
name
) - disabled: boolean (should default to false)
-
icon_path: string (Should default to blank, if parameter provided the
icon
module should be included inside the<button></button>
with the correct icon path. -
attr: string (Should default to blank, only if parameter provided it will be used to add additional parameters to the
<button></button>
) -
href (only for type = link): string (should default to /, should defined the
href
attribute of a button link)
Module guideline/example https://gitlab.com/barrel/Moscot/blob/develop/src/modules/button/button.liquid
Edited by Thomas Nguyen-Huu