The button design system gives you the flexibility to choose from multiple styles, sizes and configurations depending on your needs. Use the button classes to quickly create styled buttons, groups of buttons, dropdown buttons etc.
1.0.0

Basic buttons

These are the available button styles you can use in your interface. These basic button styles form the base classes for all other button variations.

loading example… 
<button type="button" class="btn btn-primary">YOUR TITLE</button>

<a href="http://YOUR-URL.com.au" class="btn btn-primary">YOUR TITLE</a>

CSS

Modifier classes:
  • btn-primary
  • btn-hero
  • btn-neutral
  • btn-faint
  • btn-link

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Soft buttons

Soft buttons place less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.

loading example… 
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Disabled buttons

Make buttons look unclickable by fading them back 50%.

loading example… 
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Buttons with icons

Icons in buttons add clarity to the intention of the button action. The icon should inherit the button text colour. Read more about embedding icons.

The icons in this example are not included and will have to be added to the Blend separately.

loading example… 
<button type="button" class="btn btn-primary">
	<span class="btn-text">YOUR TITLE</span>
	<span class="btn-icon icon icon-size-sm icon-YOUR-ICON-CLASS" data-grunticon-embed></span>
</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Buttons sizes

Please do not use any other button heights than those shown here. Button widths can be fixed or span columns.

loading example… 
<button type="button" class="btn btn-primary btn-lg">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Button groups toggle

Group a series of buttons together on a single line to form button group. Button groups inherit Primary, Hero and Neutral button styles.

loading example… 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Button groups sizing

Please do not use any other button heights than those shown here. Button group widths can be fixed or span columns.

loading example… 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

</div>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Dropdown buttons

Any button can trigger a dropdown menu. Dropdown buttons inherit Primary, Hero Neutral and Faint button styles including button sizes. Inside the dropdown menu you can use either links or buttons depending on what you want to do.

loading example… 
<div class="btn-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li class="dropdown-menu-headline">YOUR HEADLINE</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li class="dropdown-menu-headline">YOUR dropdown-menu-divider HEADLINE 2</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Dropdown sizing

The dropdown menu can be sized to account for its content.

loading example… 
<div class="btn-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu dropdown-menu-sm" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

CSS

Modifier class:
  • dropdown-menu-sm
  • dropdown-menu-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Dropdown buttons with radio buttons

In more complex cases you may require to use radio buttons inside your dropdown menu for e.g. for settings or filter options.

The radio buttons in this example are not included and will have to be added to the Blend separately.

loading example… 
<div class="btn-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu dropdown-menu-lg" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label1">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label1">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label1">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label3">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label3">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label3">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label4">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Dropdown buttons with checkboxes

Another example for complex dropdowns could be checkboxes.

The checkboxes in this example are not included and will have to be added to the Blend separately.

loading example… 
<div class="btn-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Block buttons

To span the full width of the parent. Primarily used in XS view.

loading example… 
<button type="button" class="btn btn-hero btn-lg btn-block">YOUR TITLE</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();
1.0.1

Basic buttons

These are the available button styles you can use in your interface. These basic button styles form the base classes for all other button variations.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">YOUR TITLE</button>

<a href="http://YOUR-URL.com.au" class="btn btn-primary">YOUR TITLE</a>

CSS

Modifier classes:
  • btn-primary
  • btn-hero
  • btn-neutral
  • btn-faint
  • btn-link

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Soft buttons

Soft buttons place less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Disabled buttons

Make buttons look unclickable by fading them back 50%.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Buttons with icons

Icons in buttons add clarity to the intention of the button action. The icon should inherit the button text colour. Read more about embedding icons.

The icons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">
	<span class="btn-text">YOUR TITLE</span>
	<span class="btn-icon icon icon-size-sm icon-YOUR-ICON-CLASS" data-grunticon-embed></span>
</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Buttons sizes

Please do not use any other button heights than those shown here. Button widths can be fixed or span columns.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-lg">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Button groups toggle

Group a series of buttons together on a single line to form button group. Button groups inherit Primary, Hero and Neutral button styles.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Button groups sizing

Please do not use any other button heights than those shown here. Button group widths can be fixed or span columns.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

</div>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Dropdown buttons

Any button can trigger a dropdown menu. Dropdown buttons inherit Primary, Hero Neutral and Faint button styles including button sizes. Inside the dropdown menu you can use either links or buttons depending on what you want to do.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li class="dropdown-menu-headline">YOUR HEADLINE</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li class="dropdown-menu-headline">YOUR dropdown-menu-divider HEADLINE 2</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Dropdown sizing

The dropdown menu can be sized to account for its content.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu dropdown-menu-sm" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

CSS

Modifier class:
  • dropdown-menu-sm
  • dropdown-menu-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Dropdown buttons with radio buttons

In more complex cases you may require to use radio buttons inside your dropdown menu for e.g. for settings or filter options.

The radio buttons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu dropdown-menu-lg" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label11101">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label11101">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label11101">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label33101">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label33101">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label33101">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label44101">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label44101">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label44101">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Dropdown buttons with checkboxes

Another example for complex dropdowns could be checkboxes.

The checkboxes in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();

Block buttons

To span the full width of the parent. Primarily used in XS view.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-hero btn-lg btn-block">YOUR TITLE</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init();
1.0.2

Basic buttons

These are the available button styles you can use in your interface. These basic button styles form the base classes for all other button variations.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">YOUR TITLE</button>

<a href="http://YOUR-URL.com.au" class="btn btn-primary">YOUR TITLE</a>

CSS

Modifier classes:
  • btn-primary
  • btn-hero
  • btn-neutral
  • btn-faint
  • btn-link

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Soft buttons

Soft buttons place less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Disabled buttons

Make buttons look unclickable by fading them back 50%.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons with icons

Icons in buttons add clarity to the intention of the button action. The icon should inherit the button text colour. Read more about embedding icons.

The icons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">
	<span class="btn-text">YOUR TITLE</span>
	<span class="btn-icon icon icon-size-sm icon-YOUR-ICON-CLASS" data-grunticon-embed></span>
</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons sizes

Please do not use any other button heights than those shown here. Button widths can be fixed or span columns.

  • XL = 48px
  • LG = 42px
  • MD = 36px
  • SM = 30px

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-lg">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons responsive sizes

You can resize the buttons on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. btn-sm becomes btn-sm-lg for a button that will change to a small button on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo
loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-xl-sm">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm-xs
  • btn-md-xs
  • btn-lg-xs
  • btn-xl-xs
  • btn-sm-sm
  • btn-md-sm
  • btn-lg-sm
  • btn-xl-sm
  • btn-sm-md
  • btn-md-md
  • btn-lg-md
  • btn-xl-md
  • btn-sm-lg
  • btn-md-lg
  • btn-lg-lg
  • btn-xl-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups toggle

Group a series of buttons together on a single line to form button group. Button groups inherit Primary, Hero and Neutral button styles.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups sizing

Please do not use any other button heights than those shown here. Button group widths can be fixed or span columns.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

</div>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons

Any button can trigger a dropdown menu. Dropdown buttons inherit Primary, Hero Neutral and Faint button styles including button sizes. Inside the dropdown menu you can use either links or buttons depending on what you want to do.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li class="dropdown-menu-headline">YOUR HEADLINE</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li class="dropdown-menu-headline">YOUR dropdown-menu-divider HEADLINE 2</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown sizing

The dropdown menu can be sized to account for its content.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody dropdown-menu-sm" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

CSS

Modifier class:
  • dropdown-menu-sm
  • dropdown-menu-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with radio buttons

In more complex cases you may require to use radio buttons inside your dropdown menu for e.g. for settings or filter options.

The radio buttons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody dropdown-menu-lg" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label5102">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label5102">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label5102">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label6102">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label6102">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label6102">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label4">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with checkboxes

Another example for complex dropdowns could be checkboxes.

The checkboxes in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Block buttons

To span the full width of the parent. Primarily used in XS view.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-hero btn-lg btn-block">YOUR TITLE</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.
1.0.3

Basic buttons

These are the available button styles you can use in your interface. These basic button styles form the base classes for all other button variations.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">YOUR TITLE</button>

<a href="http://YOUR-URL.com.au" class="btn btn-primary">YOUR TITLE</a>

CSS

Modifier classes:
  • btn-primary
  • btn-hero
  • btn-neutral
  • btn-faint
  • btn-link

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Soft buttons

Soft buttons place less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Disabled buttons

Make buttons look unclickable by fading them back 50%.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons with icons

Icons in buttons add clarity to the intention of the button action. The icon should inherit the button text colour. Read more about embedding icons.

The icons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">
	<span class="btn-text">YOUR TITLE</span>
	<span class="btn-icon icon icon-size-sm icon-YOUR-ICON-CLASS" data-grunticon-embed></span>
</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons sizes

Please do not use any other button heights than those shown here. Button widths can be fixed or span columns.

  • XL = 48px
  • LG = 42px
  • MD = 36px
  • SM = 30px

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-lg">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons responsive sizes

You can resize the buttons on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. btn-sm becomes btn-sm-lg for a button that will change to a small button on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo
loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-xl-sm">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm-xs
  • btn-md-xs
  • btn-lg-xs
  • btn-xl-xs
  • btn-sm-sm
  • btn-md-sm
  • btn-lg-sm
  • btn-xl-sm
  • btn-sm-md
  • btn-md-md
  • btn-lg-md
  • btn-xl-md
  • btn-sm-lg
  • btn-md-lg
  • btn-lg-lg
  • btn-xl-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups toggle

Group a series of buttons together on a single line to form button group. Button groups inherit Primary, Hero and Neutral button styles.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups sizing

Please do not use any other button heights than those shown here. Button group widths can be fixed or span columns.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

</div>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons

Any button can trigger a dropdown menu. Dropdown buttons inherit Primary, Hero Neutral and Faint button styles including button sizes. Inside the dropdown menu you can use either links or buttons depending on what you want to do.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li class="dropdown-menu-headline">YOUR HEADLINE</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li class="dropdown-menu-headline">YOUR dropdown-menu-divider HEADLINE 2</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown sizing

The dropdown menu can be sized to account for its content.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody dropdown-menu-sm" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

CSS

Modifier class:
  • dropdown-menu-sm
  • dropdown-menu-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with radio buttons

In more complex cases you may require to use radio buttons inside your dropdown menu for e.g. for settings or filter options.

The radio buttons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody dropdown-menu-lg" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label5103">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label5103">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label5103">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label6103">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label6103">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label6103">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label4">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with checkboxes

Another example for complex dropdowns could be checkboxes.

The checkboxes in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Block buttons

To span the full width of the parent. Primarily used in XS view.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-hero btn-lg btn-block">YOUR TITLE</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.
2.0.0

Basic buttons

These are the available button styles you can use in your interface. These basic button styles form the base classes for all other button variations.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">YOUR TITLE</button>

<a href="http://YOUR-URL.com.au" class="btn btn-primary">YOUR TITLE</a>

CSS

Modifier classes:
  • btn-primary
  • btn-hero
  • btn-neutral
  • btn-faint
  • btn-link

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Soft buttons

Soft buttons place less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Disabled buttons

Make buttons look unclickable by fading them back 50%.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons with icons

Icons in buttons add clarity to the intention of the button action. The icon should inherit the button text colour. Read more about embedding icons.

The icons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">
	<span class="btn-text">YOUR TITLE</span>
	<span class="btn-icon icon icon-size-sm icon-YOUR-ICON-CLASS" data-grunticon-embed></span>
</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons sizes

Please do not use any other button heights than those shown here. Button widths can be fixed or span columns.

  • XL = 48px
  • LG = 42px
  • MD = 36px
  • SM = 30px

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-lg">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons responsive sizes

You can resize the buttons on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. btn-sm becomes btn-sm-lg for a button that will change to a small button on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo
loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-xl-sm">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm-xs
  • btn-md-xs
  • btn-lg-xs
  • btn-xl-xs
  • btn-sm-sm
  • btn-md-sm
  • btn-lg-sm
  • btn-xl-sm
  • btn-sm-md
  • btn-md-md
  • btn-lg-md
  • btn-xl-md
  • btn-sm-lg
  • btn-md-lg
  • btn-lg-lg
  • btn-xl-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups toggle

Group a series of buttons together on a single line to form button group. Button groups inherit Primary, Hero and Neutral button styles.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups sizing

Please do not use any other button heights than those shown here. Button group widths can be fixed or span columns.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

</div>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons

Any button can trigger a dropdown menu. Dropdown buttons inherit Primary, Hero Neutral and Faint button styles including button sizes. Inside the dropdown menu you can use either links or buttons depending on what you want to do.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li class="dropdown-menu-headline">YOUR HEADLINE</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li class="dropdown-menu-headline">YOUR dropdown-menu-divider HEADLINE 2</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown sizing

The dropdown menu can be sized to account for its content.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody dropdown-menu-sm" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

CSS

Modifier class:
  • dropdown-menu-sm
  • dropdown-menu-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with radio buttons

In more complex cases you may require to use radio buttons inside your dropdown menu for e.g. for settings or filter options.

The radio buttons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody dropdown-menu-lg" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label5200">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label5200">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label5200">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label6200">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label6200">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label6200">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label4">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with checkboxes

Another example for complex dropdowns could be checkboxes.

The checkboxes in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Block buttons

To span the full width of the parent. Primarily used in XS view.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-hero btn-lg btn-block">YOUR TITLE</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.
2.0.1

Basic buttons

These are the available button styles you can use in your interface. These basic button styles form the base classes for all other button variations.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">YOUR TITLE</button>

<a href="http://YOUR-URL.com.au" class="btn btn-primary">YOUR TITLE</a>

CSS

Modifier classes:
  • btn-primary
  • btn-hero
  • btn-neutral
  • btn-faint
  • btn-link

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Soft buttons

Soft buttons place less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Disabled buttons

Make buttons look unclickable by fading them back 50%.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons with icons

Icons in buttons add clarity to the intention of the button action. The icon should inherit the button text colour. Read more about embedding icons.

The icons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">
	<span class="btn-text">YOUR TITLE</span>
	<span class="btn-icon icon icon-size-sm icon-YOUR-ICON-CLASS" data-grunticon-embed></span>
</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons sizes

Please do not use any other button heights than those shown here. Button widths can be fixed or span columns.

  • XL = 48px
  • LG = 42px
  • MD = 36px
  • SM = 30px

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-lg">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons responsive sizes

You can resize the buttons on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. btn-sm becomes btn-sm-lg for a button that will change to a small button on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo
loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-xl-sm">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm-xs
  • btn-md-xs
  • btn-lg-xs
  • btn-xl-xs
  • btn-sm-sm
  • btn-md-sm
  • btn-lg-sm
  • btn-xl-sm
  • btn-sm-md
  • btn-md-md
  • btn-lg-md
  • btn-xl-md
  • btn-sm-lg
  • btn-md-lg
  • btn-lg-lg
  • btn-xl-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups toggle

Group a series of buttons together on a single line to form button group. Button groups inherit Primary, Hero and Neutral button styles.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups sizing

Please do not use any other button heights than those shown here. Button group widths can be fixed or span columns.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

</div>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons

Any button can trigger a dropdown menu. Dropdown buttons inherit Primary, Hero Neutral and Faint button styles including button sizes. Inside the dropdown menu you can use either links or buttons depending on what you want to do.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li class="dropdown-menu-headline">YOUR HEADLINE</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li class="dropdown-menu-headline">YOUR dropdown-menu-divider HEADLINE 2</li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown sizing

The dropdown menu can be sized to account for its content.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody dropdown-menu-sm" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
		<li><button class="btn btn-link">YOUR BUTTON TITLE</button></li>
	</ul>
</div>

CSS

Modifier class:
  • dropdown-menu-sm
  • dropdown-menu-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with radio buttons

In more complex cases you may require to use radio buttons inside your dropdown menu for e.g. for settings or filter options.

The radio buttons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody dropdown-menu-lg" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label5201">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label5201">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label5201">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label6201">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label6201">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label6201">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
		<li>
			<div class="btn-dropdown-setting">
				<span class="btn-dropdown-text" id="label4">YOUR RADIO BUTTON TITLE</span>

				<div class="btn-group">

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item" aria-describedby="label4">
						<input class="btn-group-input" type="radio" name="options3">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</div>
			</div>

		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with checkboxes

Another example for complex dropdowns could be checkboxes.

The checkboxes in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<ul class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
		<li>
			<label class="checkbox checkbox-flip">
				<input class="checkbox-input" type="checkbox" name="option">
				<span class="checkbox-text">YOUR CHECKBOX TITLE</span>
			</label>
		</li>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Block buttons

To span the full width of the parent. Primarily used in XS view.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-hero btn-lg btn-block">YOUR TITLE</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.
3.0.0

Basic buttons

These are the available button styles you can use in your interface. These basic button styles form the base classes for all other button variations.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">YOUR TITLE</button>

<a href="http://YOUR-URL.com.au" class="btn btn-primary">YOUR TITLE</a>

CSS

Modifier classes:
  • btn-primary
  • btn-hero
  • btn-neutral
  • btn-faint
  • btn-link

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Soft buttons

Soft buttons place less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Disabled buttons

Make buttons look unclickable by fading them back 50%.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons with icons

Icons in buttons add clarity to the intention of the button action. The icon should inherit the button text colour. Read more about embedding icons.

The icons in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">
	<span class="btn-text">YOUR TITLE</span>
	<span class="btn-icon icon icon-size-sm icon-YOUR-ICON-CLASS" data-grunticon-embed></span>
</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons sizes

Please do not use any other button heights than those shown here. Button widths can be fixed or span columns.

  • XL = 48px
  • LG = 42px
  • MD = 36px
  • SM = 30px

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-lg">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons responsive sizes

You can resize the buttons on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. btn-sm becomes btn-sm-lg for a button that will change to a small button on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo
loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-xl-sm">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm-xs
  • btn-md-xs
  • btn-lg-xs
  • btn-xl-xs
  • btn-sm-sm
  • btn-md-sm
  • btn-lg-sm
  • btn-xl-sm
  • btn-sm-md
  • btn-md-md
  • btn-lg-md
  • btn-xl-md
  • btn-sm-lg
  • btn-md-lg
  • btn-lg-lg
  • btn-xl-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups toggle

Group a series of buttons together on a single line to form button group. Button groups inherit Primary, Hero and Neutral button styles.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups sizing

Please do not use any other button heights than those shown here. Button group widths can be fixed or span columns.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

</div>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons

Any button can trigger a dropdown menu. Dropdown buttons inherit Primary, Hero Neutral and Faint button styles including button sizes. Inside the dropdown menu you can a number of elements. You may have a headline, checkboxes, radios, a link list or a btn-group.

The the notable exeption of the btn-groups each of the other elements have to be included in your blend separately.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<h3 class="dropdown-menu-headline">YOUR HEADLINE</h3>

		<ul class="lists lists-linklist">
			<li><a href="#url">YOUR LINK</a></li>
			<li><a href="#url">YOUR LINK</a></li>
			<li><a href="#url">YOUR LINK</a></li>
		</ul>
	</div>
</div>

CSS

Modifier class:
  • dropdown-menu-headline

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown sizing

The dropdown menu can be sized to account for its content.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody dropdown-menu-sm" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<h3 class="dropdown-menu-headline">YOUR HEADLINE</h3>

		<label class="checkbox checkbox-flip">
			<input class="checkbox-input" type="checkbox" name="setting1">
			<span class="checkbox-text">YOUR LABLE</span>
		</label>

		<label class="checkbox checkbox-flip">
			<input class="checkbox-input" type="checkbox" name="setting2">
			<span class="checkbox-text">YOUR LABLE</span>
		</label>

		<p>
			<small>YOUR PARAGRAPH</small>
		</p>
	</div>
</div>

CSS

Modifier class:
  • dropdown-menu-sm
  • dropdown-menu-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with btn-groups

In more complex cases you may require to use button groups inside your dropdown menu for e.g. for settings or filter options.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<div class="btn-group-wrapper">
			<span class="btn-group-line" id="label1">YOUR LABEL</span>

			<div class="btn-group">
				<label class="btn-group-item" aria-describedby="label1">
					<input class="btn-group-input" type="radio" name="option1">
					<span class="btn-group-text btn btn-hero btn-sm">YES</span>
				</label>

				<label class="btn-group-item" aria-describedby="label1">
					<input class="btn-group-input" type="radio" name="option1">
					<span class="btn-group-text btn btn-hero btn-sm">NO</span>
				</label>
			</div>
		</div>
	</div>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with checkboxes

Another example for complex dropdowns could be checkboxes.

The checkboxes in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<label class="checkbox">
			<input class="checkbox-input" type="checkbox" name="setting">
			<span class="checkbox-text">YOUR LABEL</span>
		</label>
	</div>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with radios

Another example for complex dropdowns could be checkboxes.

The radios in this example are not included and will have to be added to the Blend separately.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<label class="radio">
			<input class="radio-input" type="radio" name="setting" value="option1">
			<span class="radio-text">YOUR LABEL</span>
		</label>

		<label class="radio">
			<input class="radio-input" type="radio" name="setting" value="option2">
			<span class="radio-text">YOUR LABEL</span>
		</label>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Block buttons

To span the full width of the parent. Primarily used in XS view.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-hero btn-lg btn-block">YOUR TITLE</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.
3.0.1

Basic buttons

These are the available button styles you can use in your interface. These basic button styles form the base classes for all other button variations.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">YOUR TITLE</button>

<button type="button" class="btn btn-link">
	<span class="btn-text">YOU TITLE</span>
</button>

<a href="http://YOUR-URL.com.au" class="btn btn-primary">YOUR TITLE</a>

CSS

Modifier classes:
  • btn-primary
  • btn-hero
  • btn-neutral
  • btn-faint
  • btn-link

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Soft buttons

Soft buttons place less visual emphasis on the button. Soft buttons are useful when grouping buttons with differing importance.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Disabled buttons

Make buttons look unclickable by fading them back 50%.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons with icons

Icons in buttons add clarity to the intention of the button action. The icon should inherit the button text colour. Read more about embedding icons.

The icons in this example are not included and will have to be added to the Blend separately.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary">
	<span class="btn-text">YOUR TITLE</span>
	<span class="btn-icon icon icon-size-sm icon-YOUR-ICON-CLASS" data-grunticon-embed></span>
</button>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons sizes

Please do not use any other button heights than those shown here. Button widths can be fixed or span columns.

  • XL = 48px
  • LG = 42px
  • MD = 36px
  • SM = 30px

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-lg">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Buttons responsive sizes

You can resize the buttons on our breakpoints. All you have to do is add the breakpoint to your size class. E.g. btn-sm becomes btn-sm-lg for a button that will change to a small button on the large breakpoint. Breakpoints are the same as we use in the grid.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-primary btn-xl-sm">YOUR TITLE</button>

CSS

Modifier classes:
  • btn-sm-xs
  • btn-md-xs
  • btn-lg-xs
  • btn-xl-xs
  • btn-sm-sm
  • btn-md-sm
  • btn-lg-sm
  • btn-xl-sm
  • btn-sm-md
  • btn-md-md
  • btn-lg-md
  • btn-xl-md
  • btn-sm-lg
  • btn-md-lg
  • btn-lg-lg
  • btn-xl-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups toggle

Group a series of buttons together on a single line to form button group. Button groups inherit Primary, Hero and Neutral button styles.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options">
		<span class="btn-group-text btn btn-primary">YOU OPTION</span>
	</label>

</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Button groups sizing

Please do not use any other button heights than those shown here. Button group widths can be fixed or span columns.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-group">

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="options1">
		<span class="btn-group-text btn btn-hero btn-lg">YOUR OPTION</span>
	</label>

</div>

CSS

Modifier classes:
  • btn-sm
  • btn-lg
  • btn-xl

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons

Any button can trigger a dropdown menu. Dropdown buttons inherit Primary, Hero Neutral and Faint button styles including button sizes. Inside the dropdown menu you can a number of elements. You may have a headline, checkboxes, radios, a link list or a btn-group.

The the notable exeption of the btn-groups each of the other elements have to be included in your blend separately.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<h3 class="dropdown-menu-headline">YOUR HEADLINE</h3>

		<ul class="lists lists-linklist">
			<li><a href="#url">YOUR LINK</a></li>
			<li><a href="#url">YOUR LINK</a></li>
			<li><a href="#url">YOUR LINK</a></li>
		</ul>
	</div>
</div>

CSS

Modifier class:
  • dropdown-menu-headline

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown sizing

The dropdown menu can be sized to account for its content.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody dropdown-menu-sm" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<h3 class="dropdown-menu-headline">YOUR HEADLINE</h3>

		<label class="checkbox checkbox-flip">
			<input class="checkbox-input" type="checkbox" name="setting1">
			<span class="checkbox-text">YOUR LABLE</span>
		</label>

		<label class="checkbox checkbox-flip">
			<input class="checkbox-input" type="checkbox" name="setting2">
			<span class="checkbox-text">YOUR LABLE</span>
		</label>

		<p>
			<small>YOUR PARAGRAPH</small>
		</p>
	</div>
</div>

CSS

Modifier class:
  • dropdown-menu-sm
  • dropdown-menu-lg

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with btn-groups

In more complex cases you may require to use button groups inside your dropdown menu for e.g. for settings or filter options.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<div class="btn-group-wrapper">
			<span class="btn-group-line" id="label1">YOUR LABEL</span>

			<div class="btn-group">
				<label class="btn-group-item" aria-describedby="label1">
					<input class="btn-group-input" type="radio" name="option1">
					<span class="btn-group-text btn btn-hero btn-sm">YES</span>
				</label>

				<label class="btn-group-item" aria-describedby="label1">
					<input class="btn-group-input" type="radio" name="option1">
					<span class="btn-group-text btn btn-hero btn-sm">NO</span>
				</label>
			</div>
		</div>
	</div>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with checkboxes

Another example for complex dropdowns could be checkboxes.

The checkboxes in this example are not included and will have to be added to the Blend separately.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<label class="checkbox">
			<input class="checkbox-input" type="checkbox" name="setting">
			<span class="checkbox-text">YOUR LABEL</span>
		</label>
	</div>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Dropdown buttons with radios

Another example for complex dropdowns could be checkboxes.

The radios in this example are not included and will have to be added to the Blend separately.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-faint js-button-dropdown" aria-label="YOUR TITLE. Hit enter to open dropdown">
		<span class="btn-dropdown-caret">YOUR TITLE</span>
	</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<label class="radio">
			<input class="radio-input" type="radio" name="setting" value="option1">
			<span class="radio-text">YOUR LABEL</span>
		</label>

		<label class="radio">
			<input class="radio-input" type="radio" name="setting" value="option2">
			<span class="radio-text">YOUR LABEL</span>
		</label>
	</ul>
</div>

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.

Block buttons

To span the full width of the parent. Primarily used in XS view.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • Link buttons did not like icons but icons liked buttons and wanted to make it work. After an intense couples therapy both now get along just fine. (#264)
  • When we call a button faint and soft we might as well use the muted text color to show the full submissiveness of this variation. (#265)
  • We found a little known behaviour difference between the HTML button tag and the HTML anchor tag. They take the same CSS but apply it differently. Pixel perfect as we are, this has now been fixed after a three day pixel-pushing session. This kind of work is only possible in a design system. ✊ (#272)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • The dropdowns got an upgrade to uber-status. The Button-groups also got a new style for when you have a line of text preceding it. We are not sure which of the two we are most excited about. (#261)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Buttons can be links and links can be buttons. We are THAT progressive. It’s just when a keyboard user focuses on a link the link-button would display it’s text white on white background. That’s the opposite of accessibility. Tis no more! (#216)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The button-groups got disjointed when faced with the new system font for El Capitan. We loosened them up and stretched those tired legs and arms and now all joints join where they should join. (#191)
  • We integrated the new versions of checkboxes and radios into the dropdowns.
  • We noticed that icons in button groups were not tinting the way they should. This, too, has been laid to rest in bug-heaven. (#185)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML and JS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
  • Differently sized buttons couldn't handle differently sized icons. We thought differently and made it work. (#141)
  • We are proud to introduce a very handy(we hope) new feature for buttons. Responsive sizes. You can now resize your buttons according to a breakpoint. Now go off and resize those buttons.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • All our buttons have a specific height to abide to. When you added an icon in a button however, the buttons seized the opportunity to go rouge and added two pixels. We sat down with them and had a heart-to-heart. Now they know better. (#131)
  • The icons, set inside a soft button (also being naughty) didn't display in the font color which made it hard for us humans to see them. That too, was fixed. (#127) (#126)
  • On some handheld devices when taping and holding the button group, the active state looked cut-off and weird. Admittedly when you hold your finger on the screen you kind of hid the problem with your finger and it was hard for us to even find this bug but this is just another example of the extent of detailed work we put into this baby. (#129) 
<button type="button" class="btn btn-hero btn-lg btn-block">YOUR TITLE</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBC)
This module comes with the usual init method:
  • GUI.buttons.init(); after the page has been loaded.
  • GUI.buttons.render(); for dynamically added elements after page load.