Buttons

Buttons in Ensemble can be created from simple anchor tags, button elements, or inputs. Buttons come in 3 different sizes, small (which is the default size), medium, and large.

Brand color 1 Brand color 2 Brand color 3 Brand color 4 Brand color 5 Brand color 6

Buttons are coloured according to your current themes colour scheme, using the button element button__brand-color-1 to button__brand-color-6

<button class="button button__brand-color-1 text-color-10">Brand color 1</button>
<button class="button button__brand-color-2 text-color-10">Brand color 2</button>
<button class="button button__brand-color-3 text-color-10">Brand color 3</button>
<button class="button button__brand-color-4 text-color-10">Brand color 4</button>
<button class="button button__brand-color-5 text-color-10">Brand color 5</button>
<button class="button button__brand-color-6 text-color-10">Brand color 6</button>

Button sizing

There are 3 different sized buttons available in Ensemble, small, medium and large.

Small Medium Large

The small button size, which is default, does not require any additional class, medium uses the class button__medium, and the large button size uses the class button__large.

<a class="button text-color-10" href="#">Small</a>
<a class="button button__medium text-color-10" href="#">Medium</a>
<a class="button button__large text-color-10" href="#">Large</a>

Ghost buttons

Ghost buttons can be easily created in Ensemble. Ghost buttons come in light, dark and mid-tone colours.

Dark Ghost Mid-colour Ghost

Creating ghost buttons is simple, just add the appropriate class to your button markup button--dark-ghost class gives you a very dark ghost button. button--mid-ghost class gives you a mid-tone ghost button, and button button--light-ghost class gives you a light ghost button for use on very dark backgrounds*.

<button class="button button--dark-ghost">Dark Ghost</button>
<button class="button button--mid-ghost">Mid-colour Ghost</button>
<button class="button button--light-ghost">Light Ghost</button>

Warning buttons

Ensemble also has a set of buttons coloured in the same way as the success, warning and failure notices.

Warning Green Warning Amber Warning Red

Using the warning colours is as easy as adding the appropriate class, button__green for success, button__amber for warning, and, button__red for failure.

<button class="button button__green text-color-10">Warning Green</button>
<button class="button button__amber text-color-10">Warning Amber</button>
<button class="button button__red text-color-10">Warning Red</button>

Generic buttons

Ensemble also features a set of buttons that can be set to be any colour you wish. These colours can be adjusted in your CSS, or, if you are using SCSS these button colours can be changed in the config file.

Generic 1 Generic 2 Generic 3 Generic 4

There are 4 generic buttons, that can be adjusted to any colour you wish.

<button class="button button__color-1 text-color-10">Generic 1</button>
<button class="button button__color-2 text-color-10">Generic 2</button>
<button class="button button__color-3 text-color-10">Generic 3</button>
<button class="button button__color-4 text-color-10">Generic 4</button>

Pill Buttons

Pill buttons have an attractive rounded shape, and provide a smooth alternative to standard square buttons.

Small Pill Medium Pill Large Pill

Pill buttons simply need the class button--pill to transform a standard button.

<button class="button button--pill button__color-1 text-color-10">Small Pill</button>
<button class="button button--pill button__medium text-color-10">Medium Pill</button>
<button class="button button--pill button__large text-color-10">Large Pill</button>

Icon buttons

You can use any of the bundled icons to create eye catching buttons, they will scale automatically to match your button text.

Icon Ghost Button Icon Button Icon Standard Button

Icon buttons simply need the icon placing before the button text.

<button class="button button--dark-ghost">
	<i class="ion-ios-briefcase"></i> Icon Ghost Button
</button>
<button class="button button--pill button__medium button__brand-color-1  text-color-10">
	<i class="ion-ios-calendar"></i> Icon Pill Button
</button>
<button class="button button__color-1 text-color-10">
	<i class="ion-ios-chatboxes"></i> Icon Standard Button
</button>