Extending Buttons W/ Solid

Custom-Button-Colors-in-Solid.scss

// Custom Button Boilerplate
// -------------------------
// all the css you would need to
// add a purple button to your app
// w/ Solid


.button--purple {
  @include button-style(violet, $text-white, violet, $text-white);
}

Custom-colored-buttons-in-solid.html

<!-- 
Custom Button Colors in Solid
If you need a button color that doesn’t exist in Solid, you can use the button-style
mixin to generate colored button styles
-->

<button class="button button--purple">New Purple Button</button>
<button class="button button--outline button--purple">New Purple Button</button>

<button class="button button--disabled button--purple">New Purple Button</button>
<button class="button button--outline button--disabled button-purple">New Purple Button</button>

<button class="button button--small button--purple xs-mr1">New Purple Button</button>
<button class="button button--outline button--small button--purple">New Purple Button</button>
Raw