The button module provides general purpose styling for CTA buttons.
The button module is implemented using the
button mixin, which takes two arguments:
$secondaryColor. The mixin controls how these colors are used to impact the button styling across its various states (default, hover, disabled, etc). Any major extensions to the
button module (e.g. new modifiers) should be made within the mixin itself.
The button border and background use
$primaryColor while the button text uses
$secondaryColor. The background and text colors are reversed on hover.
The outline button has a transparent background that hovers to
The block button will take up 100% width of its parent container.
By default, disabled buttons will display at 50% opacity.
On hover, the new background color comes sliding into place.
Simply wrap the button text in a span and include an SVG icon. Note that the icon sizing, spacing, and coloring are all easily configurable. An SVG is strongly recommended, as they are much easier to style dynamically.