Woodlands.co.uk Component Library

Buttons

Buttons

There are button styles for various colours, as well as block and inline. A small inline button has reduced horizontal padding.

By default, buttons are uppercase. You can change the case by the addition of lowercase or normal-case classes.

<!-- Default -->
<button class="button ">
    <span>Default Button</span>
</button>


<!-- Red -->
<button class="button button--red ">
    <span>Red Button</span>
</button>


<!-- Red (Dark) -->
<button class="button button--red--dark ">
    <span>Dark Red Button</span>
</button>


<!-- Red (Outline) -->
<button class="button button--red button--red--outline ">
    <span>Red Outlined Button</span>
</button>


<!-- Green -->
<button class="button button--green ">
    <span>Green Button</span>
</button>


<!-- Green (Dark) -->
<button class="button button--green--dark ">
    <span>Dark Green Button</span>
</button>


<!-- Green (Outline) -->
<button class="button button--green button--green--outline ">
    <span>Green Outlined Button</span>
</button>


<!-- Yellow -->
<button class="button button--yellow ">
    <span>Yellow Button</span>
</button>


<!-- Yellow (Outline) -->
<button class="button button--yellow button--yellow--outline ">
    <span>Yellow Outlined Button</span>
</button>


<!-- Inline (Default) -->
<button class="button button--inline ">
    <span>Default Inline Button</span>
</button>


<!-- Inline (Red) -->
<button class="button button--inline button--red--dark ">
    <span>Dark Red Inline Button</span>
</button>


<!-- Inline (Green) -->
<button class="button button--inline button--green ">
    <span>Green Inline Button</span>
</button>


<!-- Inline (Yellow) -->
<button class="button button--inline button--yellow ">
    <span>Yellow Inline Button</span>
</button>


<!-- Small Inline (Default) -->
<button class="button button--inline--small ">
    <span>Default Small Inline Button</span>
</button>


{{#if button.link}}
<a href="{{ button.link }}" class="{{modifier _self.baseHandle button.modifiers}} {{ button.classes }}">
  <span>{{ button.text }}</span>
</a>
{{else}}
<button class="{{modifier _self.baseHandle button.modifiers}} {{ button.classes }}">
  <span>{{ button.text }}</span>
</button>
{{/if}}