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.

Buttons

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.

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! 👏
<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(WBG)
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 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! 👏
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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 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! 👏
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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.

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! 👏
<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(WBG)
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 dropdown buttons

Using the soft button style on a dropdown gives it less visual emphasis. This is useful when grouping buttons with differing importance. For example if a dropdown is associated with a primary CTA it’s probably more important to draw the user’s attention to the CTA.

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! 👏
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero btn-soft 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(WBG)
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 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! 👏
<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(WBG)
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.

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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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.

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! 👏
<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(WBG)
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 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! 👏
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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 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! 👏
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 dropdown buttons

Using the soft button style on a dropdown gives it less visual emphasis. This is useful when grouping buttons with differing importance. For example if a dropdown is associated with a primary CTA it’s probably more important to draw the user’s attention to the CTA.

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! 👏
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero btn-soft 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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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 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! 👏
<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(WBG)
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! 👏
<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(WBG)
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! 👏
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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! 👏
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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 dropdown buttons

Using the soft button style on a dropdown gives it less visual emphasis. This is useful when grouping buttons with differing importance. For example if a dropdown is associated with a primary CTA it’s probably more important to draw the user’s attention to the CTA.

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! 👏
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero btn-soft 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(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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! 👏
<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(WBG)
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.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.

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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 dropdown buttons

Using the soft button style on a dropdown gives it less visual emphasis. This is useful when grouping buttons with differing importance. For example if a dropdown is associated with a primary CTA it’s probably more important to draw the user’s attention to the CTA.

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero btn-soft 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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.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.

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-primary btn-soft">Primary button</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-primary" disabled>Primary button</button>

LESS

The main mixin is called: _buttons(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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 dropdown buttons

Using the soft button style on a dropdown gives it less visual emphasis. This is useful when grouping buttons with differing importance. For example if a dropdown is associated with a primary CTA it’s probably more important to draw the user’s attention to the CTA.

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-hero btn-soft 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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<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(WBG)
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.
4.0.0

Basic button types

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.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-{TYPE}">{BUTTON_TEXT}</button>

CSS

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

LESS

The main mixin is called: _buttons(WBG)
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 tags

Button styling can be applied to <button>, <a> or <input> elements if necessary.

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Link -->
<a href="{URL}" class="btn btn-{TYPE}" role="button">{BUTTON_TEXT}</a>

<!-- Button -->
<button class="btn btn-{TYPE}" type="submit">{BUTTON_TEXT}</button>

<!-- Input -->
<input class="btn btn-{TYPE}" type="button" value="{BUTTON_TEXT}">

<!-- Submit -->
<input class="btn btn-{TYPE}" type="submit" value="{BUTTON_TEXT}">

<!-- Reset -->
<input class="btn btn-{TYPE}" type="reset" value="{BUTTON_TEXT}">

LESS

The main mixin is called: _buttons(WBG)
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.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-{TYPE} btn-soft">{BUTTON_TEXT}</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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%.

Buttons can be disabled using a disabled attribute on either the button itself or a wrapping <fieldset> element.

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Disabled Basic -->
<button type="button" class="btn btn-{TYPE}" disabled>{BUTTON_TEXT}</button>

<!-- Disabled Soft -->
<button type="button" class="btn btn-{TYPE} btn-soft" disabled>{BUTTON_TEXT}</button>

<!-- Disabled Fieldset with Basic -->
<fieldset disabled>
	<button type="button" class="btn btn-{TYPE}">{BUTTON_TEXT}</button>
</fieldset>

<!-- Disabled Fieldset with Soft -->
<fieldset disabled>
	<button type="button" class="btn btn-{TYPE} btn-soft">{BUTTON_TEXT}</button>
</fieldset>

LESS

The main mixin is called: _buttons(WBG)
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 sizes

Buttons are available in four sizes; in addition to the default (Medium) size, there are two larger sizes (Extra large and Large) and one smaller size (Small). These sizes align with other form element sizes.

  • Extra large: 48px
  • Large: 42px
  • Medium (default): 36px
  • Small: 30px

Button widths can either be auto-sized (inline) or fit to the grid (block), see Block buttons below.

Tip: use btn-trim to strip horizontal padding; useful for btn-link buttons you want to visually align to a column edge.

Please only use the button sizes provided.

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Default -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}]">{BUTTON_TEXT}</button>

<!-- Trimmed -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-trim">BUTTON TEXT</button>

CSS

Modifier classes:
  • btn-small
  • btn-large
  • btn-xlarge
  • btn-trim

LESS

The main mixin is called: _buttons(WBG)
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

Buttons widths are auto-sized (inline) by default; they’re as wide as their text. Block level buttons span the full width of their parent element and fit to the grid. These are often used in the XS breakpoint (generally for mobile devices).

Block buttons will maintain vertical spacing when stacked.

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Default -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-block">{BUTTON_TEXT}</button>

<!-- Soft -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-soft btn-block">{BUTTON_TEXT}</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBG)
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.

Responsive buttons

Style buttons according to grid breakpoints by appending the breakpoint to your modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example btn-small becomes btn-small-md for a button that will change to Small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • btn-{size}-{breakpoint}: The button will render at the given size at the given breakpoint and wider
  • btn-block-{breakpoint}: The button will be block at the given breakpoint and wider

An ‘at this breakpoint only’ option is also available.

  • btn-{size}-{breakpoint}-only: The button will render at the given size at the given breakpoint only
  • btn-block-{breakpoint}-only: The button will be block at the given breakpoint only

Tip: Use multiple responsive classes on your button to get the desired effect. Start with setting the default button size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .btn-{size}-xs or .btn-{size}-lg-only classes; simply use .btn-{size} and .btn-{size}-lg respectively.

Demo

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Responsive sizing -->
<button type="button" class="btn btn-{TYPE} btn-{SIZE}-{BREAKPOINT}">{BUTTON_TEXT}</button>
<button type="button" class="btn btn-{TYPE} btn-{SIZE}-{BREAKPOINT}-only">{BUTTON_TEXT}</button>

<!-- Responsive block -->
<button type="button" class="btn btn-{TYPE} btn-block-{BREAKPOINT}">{BUTTON_TEXT}</button>
<button type="button" class="btn btn-{TYPE} btn-block-{BREAKPOINT}-only">{BUTTON_TEXT}</button>

CSS

Sizing modifier classes:
  • btn-small-sm
  • btn-medium-sm
  • btn-large-sm
  • btn-xlarge-sm
  • btn-small-md
  • btn-medium-md
  • btn-large-md
  • btn-xlarge-md
  • btn-small-lg
  • btn-medium-lg
  • btn-large-lg
  • btn-xlarge-lg
  • btn-small-xs-only
  • btn-medium-xs-only
  • btn-large-xs-only
  • btn-xlarge-xs-only
  • btn-small-sm-only
  • btn-medium-sm-only
  • btn-large-sm-only
  • btn-xlarge-sm-only
  • btn-small-md-only
  • btn-medium-md-only
  • btn-large-md-only
  • btn-xlarge-md-only
Block modifier classes:
  • btn-block-sm
  • btn-block-md
  • btn-block-lg
  • btn-block-xs-only
  • btn-block-sm-only
  • btn-block-md-only

LESS

The main mixin is called: _buttons(WBG)
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.

Button icons can be positioned on the left or right of button text by reordering the internal span elements. Icon on the right is preferred. When using block buttons the icon and text will reposition to align with the button edge.

Tip: when using icons in buttons you must wrap your button text with a btn-text classed span and add a btn-icon class on your icon span. The text and icon elements should be separated by a space or new line in your markup.

Icons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- No text -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
</button>

<!-- Icon right (recommended) -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-text">{BUTTON_TEXT}</span>
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
</button>

<!-- Icon left -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
	<span class="btn-text">{BUTTON_TEXT}</span>
</button>

LESS

The main mixin is called: _buttons(WBG)
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

Group a series of buttons together on a single line to form a button group toggle. These function much like a radio input set.

Button groups inherit button type, sizing and icon options, and can render in block mode similar to block buttons.

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Text only -->
<div class="btn-group [btn-group-block]">
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">{BUTTON_TEXT}</span>
	</label>
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">{BUTTON_TEXT}</span>
	</label>
</div>

<!-- Icon right -->
<div class="btn-group [btn-group-block]">
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">
			<span class="btn-text">{BUTTON_TEXT}</span>
			<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
		</span>
	</label>
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">
			<span class="btn-text">{BUTTON_TEXT}</span>
			<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
		</span>
	</label>
</div>

CSS

Modifier classes:
  • btn-group-block

LESS

The main mixin is called: _buttons(WBG)
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 dropdowns

Buttons can be used to trigger dropdown menus. Dropdown menus can house a number of elements including headlines, lists, checkboxes, radios, switches and button groups.

Dropdowns come in three sizes, in addition to the medium (default) size there are small and large options.

Tip: you must wrap your dropdown button text with a btn-text classed span. The text element should be separated by a space or new line in your markup.

The internal dropdown elements (excluding Button groups) are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-{TYPE} js-button-dropdown" aria-label="{BUTTON_TEXT}. Hit enter to open dropdown">{BUTTON_TEXT}</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<!-- Headline -->
		<h3 class="dropdown-menu-headline">{DROPDOWN HEADLINE}</h3>

		<!-- List -->
		<ul class="lists lists-linklist">
			<li><a href="{URL}">{LINK TEXT}</a></li>
			<li><a href="{URL}">{LINK TEXT}</a></li>
			<li><a href="{URL}">{LINK TEXT}</a></li>
		</ul>

		<!-- Checkbox -->
		<label class="checkbox checkbox-flip">
			<input class="checkbox-input" type="checkbox" name="{NAME}" value="{VALUE}">
			<span class="checkbox-text">{CHECKBOX TEXT}</span>
		</label>

		<!-- Radios -->
		<label class="radio">
			<input class="radio-input" type="radio" name="{NAME}" value="{VALUE 1}">
			<span class="radio-text">{RADIO TEXT}</span>
		</label>
		<label class="radio">
			<input class="radio-input" type="radio" name="{NAME}" value="{VALUE 2}">
			<span class="radio-text">{RADIO TEXT}</span>
		</label>

		<!-- Switch -->
		<label class="switch">
			<input class="switch-input" type="checkbox" name="{NAME}" value="{VALUE}">
			<span class="switch-text">{RADIO TEXT}</span>
			<span class="switch-toggle">
				<span class="switch-toggle-off">{OFF TEXT}</span>
				<span class="switch-toggle-on">{ON TEXT}</span>
			</span>
		</label>

		<!-- Button group -->
		<div class="btn-group-wrapper">
			<div class="button-group-text" id="{ID}"></div>

			<div class="btn-group">
				<label class="btn-group-item" aria-describedby="{ID}">
					<input class="btn-group-input" type="radio" name="{NAME}" value="{VALUE 1}">
					<span class="btn-group-text btn btn-hero btn-sm">{BUTTON_TEXT}</span>
				</label>
				<label class="btn-group-item" aria-describedby="{ID}">
					<input class="btn-group-input" type="radio" name="{NAME}" value="{VALUE 2}">
					<span class="btn-group-text btn btn-hero btn-sm">{BUTTON_TEXT}</span>
				</label>
			</div>
		</div>
	</div>
</div>

CSS

Modifier classes:
  • btn-dropdown-small
  • btn-dropdown-large

LESS

The main mixin is called: _buttons(WBG)
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.
4.0.1

Basic button types

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 v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-{TYPE}">{BUTTON_TEXT}</button>

CSS

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

LESS

The main mixin is called: _buttons(WBG)
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 tags

Button styling can be applied to <button>, <a> or <input> elements if necessary.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Link -->
<a href="{URL}" class="btn btn-{TYPE}" role="button">{BUTTON_TEXT}</a>

<!-- Button -->
<button class="btn btn-{TYPE}" type="submit">{BUTTON_TEXT}</button>

<!-- Input -->
<input class="btn btn-{TYPE}" type="button" value="{BUTTON_TEXT}">

<!-- Submit -->
<input class="btn btn-{TYPE}" type="submit" value="{BUTTON_TEXT}">

<!-- Reset -->
<input class="btn btn-{TYPE}" type="reset" value="{BUTTON_TEXT}">

LESS

The main mixin is called: _buttons(WBG)
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 v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-{TYPE} btn-soft">{BUTTON_TEXT}</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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%.

Buttons can be disabled using a disabled attribute on either the button itself or a wrapping <fieldset> element.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Disabled Basic -->
<button type="button" class="btn btn-{TYPE}" disabled>{BUTTON_TEXT}</button>

<!-- Disabled Soft -->
<button type="button" class="btn btn-{TYPE} btn-soft" disabled>{BUTTON_TEXT}</button>

<!-- Disabled Fieldset with Basic -->
<fieldset disabled>
	<button type="button" class="btn btn-{TYPE}">{BUTTON_TEXT}</button>
</fieldset>

<!-- Disabled Fieldset with Soft -->
<fieldset disabled>
	<button type="button" class="btn btn-{TYPE} btn-soft">{BUTTON_TEXT}</button>
</fieldset>

LESS

The main mixin is called: _buttons(WBG)
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 sizes

Buttons are available in four sizes; in addition to the default (Medium) size, there are two larger sizes (Extra large and Large) and one smaller size (Small). These sizes align with other form element sizes.

  • Extra large: 48px
  • Large: 42px
  • Medium (default): 36px
  • Small: 30px

Button widths can either be auto-sized (inline) or fit to the grid (block), see Block buttons below.

Tip: use btn-trim to strip horizontal padding; useful for btn-link buttons you want to visually align to a column edge.

Please only use the button sizes provided.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Default -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}]">{BUTTON_TEXT}</button>

<!-- Trimmed -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-trim">BUTTON TEXT</button>

CSS

Modifier classes:
  • btn-small
  • btn-large
  • btn-xlarge
  • btn-trim

LESS

The main mixin is called: _buttons(WBG)
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

Buttons widths are auto-sized (inline) by default; they’re as wide as their text. Block level buttons span the full width of their parent element and fit to the grid. These are often used in the XS breakpoint (generally for mobile devices).

Block buttons will maintain vertical spacing when stacked.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Default -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-block">{BUTTON_TEXT}</button>

<!-- Soft -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-soft btn-block">{BUTTON_TEXT}</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBG)
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.

Responsive buttons

Style buttons according to grid breakpoints by appending the breakpoint to your modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example btn-small becomes btn-small-md for a button that will change to Small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • btn-{size}-{breakpoint}: The button will render at the given size at the given breakpoint and wider
  • btn-block-{breakpoint}: The button will be block at the given breakpoint and wider

An ‘at this breakpoint only’ option is also available.

  • btn-{size}-{breakpoint}-only: The button will render at the given size at the given breakpoint only
  • btn-block-{breakpoint}-only: The button will be block at the given breakpoint only

Tip: Use multiple responsive classes on your button to get the desired effect. Start with setting the default button size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .btn-{size}-xs or .btn-{size}-lg-only classes; simply use .btn-{size} and .btn-{size}-lg respectively.

Demo

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Responsive sizing -->
<button type="button" class="btn btn-{TYPE} btn-{SIZE}-{BREAKPOINT}">{BUTTON_TEXT}</button>
<button type="button" class="btn btn-{TYPE} btn-{SIZE}-{BREAKPOINT}-only">{BUTTON_TEXT}</button>

<!-- Responsive block -->
<button type="button" class="btn btn-{TYPE} btn-block-{BREAKPOINT}">{BUTTON_TEXT}</button>
<button type="button" class="btn btn-{TYPE} btn-block-{BREAKPOINT}-only">{BUTTON_TEXT}</button>

CSS

Sizing modifier classes:
  • btn-small-sm
  • btn-medium-sm
  • btn-large-sm
  • btn-xlarge-sm
  • btn-small-md
  • btn-medium-md
  • btn-large-md
  • btn-xlarge-md
  • btn-small-lg
  • btn-medium-lg
  • btn-large-lg
  • btn-xlarge-lg
  • btn-small-xs-only
  • btn-medium-xs-only
  • btn-large-xs-only
  • btn-xlarge-xs-only
  • btn-small-sm-only
  • btn-medium-sm-only
  • btn-large-sm-only
  • btn-xlarge-sm-only
  • btn-small-md-only
  • btn-medium-md-only
  • btn-large-md-only
  • btn-xlarge-md-only
Block modifier classes:
  • btn-block-sm
  • btn-block-md
  • btn-block-lg
  • btn-block-xs-only
  • btn-block-sm-only
  • btn-block-md-only

LESS

The main mixin is called: _buttons(WBG)
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.

Button icons can be positioned on the left or right of button text by reordering the internal span elements. Icon on the right is preferred. When using block buttons the icon and text will reposition to align with the button edge.

Tip: when using icons in buttons you must wrap your button text with a btn-text classed span and add a btn-icon class on your icon span. The text and icon elements should be separated by a space or new line in your markup.

Icons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- No text -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
</button>

<!-- Icon right (recommended) -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-text">{BUTTON_TEXT}</span>
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
</button>

<!-- Icon left -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
	<span class="btn-text">{BUTTON_TEXT}</span>
</button>

LESS

The main mixin is called: _buttons(WBG)
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

Group a series of buttons together on a single line to form a button group toggle. These function much like a radio input set.

Button groups inherit button type, sizing and icon options, and can render in block mode similar to block buttons.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Text only -->
<div class="btn-group [btn-group-block]">
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">{BUTTON_TEXT}</span>
	</label>
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">{BUTTON_TEXT}</span>
	</label>
</div>

<!-- Icon right -->
<div class="btn-group [btn-group-block]">
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">
			<span class="btn-text">{BUTTON_TEXT}</span>
			<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
		</span>
	</label>
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">
			<span class="btn-text">{BUTTON_TEXT}</span>
			<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
		</span>
	</label>
</div>

CSS

Modifier classes:
  • btn-group-block

LESS

The main mixin is called: _buttons(WBG)
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 dropdowns

Buttons can be used to trigger dropdown menus. Dropdown menus can house a number of elements including headlines, lists, checkboxes, radios, switches and button groups.

Dropdowns come in three sizes, in addition to the medium (default) size there are small and large options.

Tip: you must wrap your dropdown button text with a btn-text classed span. The text element should be separated by a space or new line in your markup.

The internal dropdown elements (excluding Button groups) are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-{TYPE} js-button-dropdown" aria-label="{BUTTON_TEXT}. Hit enter to open dropdown">{BUTTON_TEXT}</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<!-- Headline -->
		<h3 class="dropdown-menu-headline">{DROPDOWN HEADLINE}</h3>

		<!-- List -->
		<ul class="lists lists-linklist">
			<li><a href="{URL}">{LINK TEXT}</a></li>
			<li><a href="{URL}">{LINK TEXT}</a></li>
			<li><a href="{URL}">{LINK TEXT}</a></li>
		</ul>

		<!-- Checkbox -->
		<label class="checkbox checkbox-flip">
			<input class="checkbox-input" type="checkbox" name="{NAME}" value="{VALUE}">
			<span class="checkbox-text">{CHECKBOX TEXT}</span>
		</label>

		<!-- Radios -->
		<label class="radio">
			<input class="radio-input" type="radio" name="{NAME}" value="{VALUE 1}">
			<span class="radio-text">{RADIO TEXT}</span>
		</label>
		<label class="radio">
			<input class="radio-input" type="radio" name="{NAME}" value="{VALUE 2}">
			<span class="radio-text">{RADIO TEXT}</span>
		</label>

		<!-- Switch -->
		<label class="switch">
			<input class="switch-input" type="checkbox" name="{NAME}" value="{VALUE}">
			<span class="switch-text">{RADIO TEXT}</span>
			<span class="switch-toggle">
				<span class="switch-toggle-off">{OFF TEXT}</span>
				<span class="switch-toggle-on">{ON TEXT}</span>
			</span>
		</label>

		<!-- Button group -->
		<div class="btn-group-wrapper">
			<div class="button-group-text" id="{ID}"></div>

			<div class="btn-group">
				<label class="btn-group-item" aria-describedby="{ID}">
					<input class="btn-group-input" type="radio" name="{NAME}" value="{VALUE 1}">
					<span class="btn-group-text btn btn-hero btn-sm">{BUTTON_TEXT}</span>
				</label>
				<label class="btn-group-item" aria-describedby="{ID}">
					<input class="btn-group-input" type="radio" name="{NAME}" value="{VALUE 2}">
					<span class="btn-group-text btn btn-hero btn-sm">{BUTTON_TEXT}</span>
				</label>
			</div>
		</div>
	</div>
</div>

CSS

Modifier classes:
  • btn-dropdown-small
  • btn-dropdown-large

LESS

The main mixin is called: _buttons(WBG)
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.
4.0.2

Basic button types

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 v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-{TYPE}">{BUTTON_TEXT}</button>

CSS

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

LESS

The main mixin is called: _buttons(WBG)
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 tags

Button styling can be applied to <button>, <a> or <input> elements if necessary.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Link -->
<a href="{URL}" class="btn btn-{TYPE}" role="button">{BUTTON_TEXT}</a>

<!-- Button -->
<button class="btn btn-{TYPE}" type="submit">{BUTTON_TEXT}</button>

<!-- Input -->
<input class="btn btn-{TYPE}" type="button" value="{BUTTON_TEXT}">

<!-- Submit -->
<input class="btn btn-{TYPE}" type="submit" value="{BUTTON_TEXT}">

<!-- Reset -->
<input class="btn btn-{TYPE}" type="reset" value="{BUTTON_TEXT}">

LESS

The main mixin is called: _buttons(WBG)
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 v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-{TYPE} btn-soft">{BUTTON_TEXT}</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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%.

Buttons can be disabled using a disabled attribute on either the button itself or a wrapping <fieldset> element.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Disabled Basic -->
<button type="button" class="btn btn-{TYPE}" disabled>{BUTTON_TEXT}</button>

<!-- Disabled Soft -->
<button type="button" class="btn btn-{TYPE} btn-soft" disabled>{BUTTON_TEXT}</button>

<!-- Disabled Fieldset with Basic -->
<fieldset disabled>
	<button type="button" class="btn btn-{TYPE}">{BUTTON_TEXT}</button>
</fieldset>

<!-- Disabled Fieldset with Soft -->
<fieldset disabled>
	<button type="button" class="btn btn-{TYPE} btn-soft">{BUTTON_TEXT}</button>
</fieldset>

LESS

The main mixin is called: _buttons(WBG)
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 sizes

Buttons are available in four sizes; in addition to the default (Medium) size, there are two larger sizes (Extra large and Large) and one smaller size (Small). These sizes align with other form element sizes.

  • Extra large: 48px
  • Large: 42px
  • Medium (default): 36px
  • Small: 30px

Button widths can either be auto-sized (inline) or fit to the grid (block), see Block buttons below.

Tip: use btn-trim to strip horizontal padding; useful for btn-link buttons you want to visually align to a column edge.

Please only use the button sizes provided.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Default -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}]">{BUTTON_TEXT}</button>

<!-- Trimmed -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-trim">BUTTON TEXT</button>

CSS

Modifier classes:
  • btn-small
  • btn-large
  • btn-xlarge
  • btn-trim

LESS

The main mixin is called: _buttons(WBG)
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

Buttons widths are auto-sized (inline) by default; they’re as wide as their text. Block level buttons span the full width of their parent element and fit to the grid. These are often used in the XS breakpoint (generally for mobile devices).

Block buttons will maintain vertical spacing when stacked.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Default -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-block">{BUTTON_TEXT}</button>

<!-- Soft -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-soft btn-block">{BUTTON_TEXT}</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBG)
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.

Responsive buttons

Style buttons according to grid breakpoints by appending the breakpoint to your modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example btn-small becomes btn-small-md for a button that will change to Small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • btn-{size}-{breakpoint}: The button will render at the given size at the given breakpoint and wider
  • btn-block-{breakpoint}: The button will be block at the given breakpoint and wider

An ‘at this breakpoint only’ option is also available.

  • btn-{size}-{breakpoint}-only: The button will render at the given size at the given breakpoint only
  • btn-block-{breakpoint}-only: The button will be block at the given breakpoint only

Tip: Use multiple responsive classes on your button to get the desired effect. Start with setting the default button size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .btn-{size}-xs or .btn-{size}-lg-only classes; simply use .btn-{size} and .btn-{size}-lg respectively.

Demo

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Responsive sizing -->
<button type="button" class="btn btn-{TYPE} btn-{SIZE}-{BREAKPOINT}">{BUTTON_TEXT}</button>
<button type="button" class="btn btn-{TYPE} btn-{SIZE}-{BREAKPOINT}-only">{BUTTON_TEXT}</button>

<!-- Responsive block -->
<button type="button" class="btn btn-{TYPE} btn-block-{BREAKPOINT}">{BUTTON_TEXT}</button>
<button type="button" class="btn btn-{TYPE} btn-block-{BREAKPOINT}-only">{BUTTON_TEXT}</button>

CSS

Sizing modifier classes:
  • btn-small-sm
  • btn-medium-sm
  • btn-large-sm
  • btn-xlarge-sm
  • btn-small-md
  • btn-medium-md
  • btn-large-md
  • btn-xlarge-md
  • btn-small-lg
  • btn-medium-lg
  • btn-large-lg
  • btn-xlarge-lg
  • btn-small-xs-only
  • btn-medium-xs-only
  • btn-large-xs-only
  • btn-xlarge-xs-only
  • btn-small-sm-only
  • btn-medium-sm-only
  • btn-large-sm-only
  • btn-xlarge-sm-only
  • btn-small-md-only
  • btn-medium-md-only
  • btn-large-md-only
  • btn-xlarge-md-only
Block modifier classes:
  • btn-block-sm
  • btn-block-md
  • btn-block-lg
  • btn-block-xs-only
  • btn-block-sm-only
  • btn-block-md-only

LESS

The main mixin is called: _buttons(WBG)
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.

Button icons can be positioned on the left or right of button text by reordering the internal span elements. Icon on the right is preferred. When using block buttons the icon and text will reposition to align with the button edge.

Tip: when using icons in buttons you must wrap your button text with a btn-text classed span and add a btn-icon class on your icon span. The text and icon elements should be separated by a space or new line in your markup.

Icons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- No text -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
</button>

<!-- Icon right (recommended) -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-text">{BUTTON_TEXT}</span>
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
</button>

<!-- Icon left -->
<button type="button" class="btn btn-{TYPE} [btn-block]">
	<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
	<span class="btn-text">{BUTTON_TEXT}</span>
</button>

LESS

The main mixin is called: _buttons(WBG)
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

Group a series of buttons together on a single line to form a button group toggle. These function much like a radio input set.

Button groups inherit button type, sizing and icon options, and can render in block mode similar to block buttons.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Text only -->
<div class="btn-group [btn-group-block]">
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">{BUTTON_TEXT}</span>
	</label>
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">{BUTTON_TEXT}</span>
	</label>
</div>

<!-- Icon right -->
<div class="btn-group [btn-group-block]">
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">
			<span class="btn-text">{BUTTON_TEXT}</span>
			<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
		</span>
	</label>
	<label class="btn-group-item">
		<input class="btn-group-input" type="radio" name="{NAME}">
		<span class="btn btn-{TYPE} [btn-{size}]">
			<span class="btn-text">{BUTTON_TEXT}</span>
			<span class="btn-icon icon icon-{NAME}" data-grunticon-embed></span>
		</span>
	</label>
</div>

CSS

Modifier classes:
  • btn-group-block

LESS

The main mixin is called: _buttons(WBG)
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 dropdowns

Buttons can be used to trigger dropdown menus. Dropdown menus can house a number of elements including headlines, lists, checkboxes, radios, switches and button groups.

Dropdowns come in three sizes, in addition to the medium (default) size there are small and large options.

Tip: you must wrap your dropdown button text with a btn-text classed span. The text element should be separated by a space or new line in your markup.

The internal dropdown elements (excluding Button groups) are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<div class="btn-dropdown js-dropdown" aria-haspopup="true">
	<button type="button" class="btn btn-{TYPE} js-button-dropdown" aria-label="{BUTTON_TEXT}. Hit enter to open dropdown">{BUTTON_TEXT}</button>
	<div class="dropdown-menu js-button-dropdownbody" role="menu" aria-label="Hit the Esc key to close dropdown" tabindex="-1">
		<!-- Headline -->
		<h3 class="dropdown-menu-headline">{DROPDOWN HEADLINE}</h3>

		<!-- List -->
		<ul class="lists lists-linklist">
			<li><a href="{URL}">{LINK TEXT}</a></li>
			<li><a href="{URL}">{LINK TEXT}</a></li>
			<li><a href="{URL}">{LINK TEXT}</a></li>
		</ul>

		<!-- Checkbox -->
		<label class="checkbox checkbox-flip">
			<input class="checkbox-input" type="checkbox" name="{NAME}" value="{VALUE}">
			<span class="checkbox-text">{CHECKBOX TEXT}</span>
		</label>

		<!-- Radios -->
		<label class="radio">
			<input class="radio-input" type="radio" name="{NAME}" value="{VALUE 1}">
			<span class="radio-text">{RADIO TEXT}</span>
		</label>
		<label class="radio">
			<input class="radio-input" type="radio" name="{NAME}" value="{VALUE 2}">
			<span class="radio-text">{RADIO TEXT}</span>
		</label>

		<!-- Switch -->
		<label class="switch">
			<input class="switch-input" type="checkbox" name="{NAME}" value="{VALUE}">
			<span class="switch-text">{RADIO TEXT}</span>
			<span class="switch-toggle">
				<span class="switch-toggle-off">{OFF TEXT}</span>
				<span class="switch-toggle-on">{ON TEXT}</span>
			</span>
		</label>

		<!-- Button group -->
		<div class="btn-group-wrapper">
			<div class="button-group-text" id="{ID}"></div>

			<div class="btn-group">
				<label class="btn-group-item" aria-describedby="{ID}">
					<input class="btn-group-input" type="radio" name="{NAME}" value="{VALUE 1}">
					<span class="btn-group-text btn btn-hero btn-sm">{BUTTON_TEXT}</span>
				</label>
				<label class="btn-group-item" aria-describedby="{ID}">
					<input class="btn-group-input" type="radio" name="{NAME}" value="{VALUE 2}">
					<span class="btn-group-text btn btn-hero btn-sm">{BUTTON_TEXT}</span>
				</label>
			</div>
		</div>
	</div>
</div>

CSS

Modifier classes:
  • btn-dropdown-small
  • btn-dropdown-large

LESS

The main mixin is called: _buttons(WBG)
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.
4.0.3

Basic button types

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 v4.0.2

This version changed: CSS/LESS, but not: HTML, JS
  • Increased small button icon size to ‘small’ (18px); was ‘xsmall’ (12px) (#440)

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-{TYPE}">{BUTTON_TEXT}</button>

CSS

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

LESS

The main mixin is called: _buttons(WBG)
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 tags

Button styling can be applied to <button>, <a> or <input> elements if necessary.

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML, JS
  • Increased small button icon size to ‘small’ (18px); was ‘xsmall’ (12px) (#440)

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Link -->
<a href="{URL}" class="btn btn-{TYPE}" role="button">{BUTTON_TEXT}</a>

<!-- Button -->
<button class="btn btn-{TYPE}" type="submit">{BUTTON_TEXT}</button>

<!-- Input -->
<input class="btn btn-{TYPE}" type="button" value="{BUTTON_TEXT}">

<!-- Submit -->
<input class="btn btn-{TYPE}" type="submit" value="{BUTTON_TEXT}">

<!-- Reset -->
<input class="btn btn-{TYPE}" type="reset" value="{BUTTON_TEXT}">

LESS

The main mixin is called: _buttons(WBG)
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 v4.0.2

This version changed: CSS/LESS, but not: HTML, JS
  • Increased small button icon size to ‘small’ (18px); was ‘xsmall’ (12px) (#440)

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<button type="button" class="btn btn-{TYPE} btn-soft">{BUTTON_TEXT}</button>

CSS

Modifier class:
  • btn-soft

LESS

The main mixin is called: _buttons(WBG)
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%.

Buttons can be disabled using a disabled attribute on either the button itself or a wrapping <fieldset> element.

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML, JS
  • Increased small button icon size to ‘small’ (18px); was ‘xsmall’ (12px) (#440)

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Disabled Basic -->
<button type="button" class="btn btn-{TYPE}" disabled>{BUTTON_TEXT}</button>

<!-- Disabled Soft -->
<button type="button" class="btn btn-{TYPE} btn-soft" disabled>{BUTTON_TEXT}</button>

<!-- Disabled Fieldset with Basic -->
<fieldset disabled>
	<button type="button" class="btn btn-{TYPE}">{BUTTON_TEXT}</button>
</fieldset>

<!-- Disabled Fieldset with Soft -->
<fieldset disabled>
	<button type="button" class="btn btn-{TYPE} btn-soft">{BUTTON_TEXT}</button>
</fieldset>

LESS

The main mixin is called: _buttons(WBG)
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 sizes

Buttons are available in four sizes; in addition to the default (Medium) size, there are two larger sizes (Extra large and Large) and one smaller size (Small). These sizes align with other form element sizes.

  • Extra large: 48px
  • Large: 42px
  • Medium (default): 36px
  • Small: 30px

Button widths can either be auto-sized (inline) or fit to the grid (block), see Block buttons below.

Tip: use btn-trim to strip horizontal padding; useful for btn-link buttons you want to visually align to a column edge.

Please only use the button sizes provided.

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML, JS
  • Increased small button icon size to ‘small’ (18px); was ‘xsmall’ (12px) (#440)

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Default -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}]">{BUTTON_TEXT}</button>

<!-- Trimmed -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-trim">BUTTON TEXT</button>

CSS

Modifier classes:
  • btn-small
  • btn-large
  • btn-xlarge
  • btn-trim

LESS

The main mixin is called: _buttons(WBG)
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

Buttons widths are auto-sized (inline) by default; they’re as wide as their text. Block level buttons span the full width of their parent element and fit to the grid. These are often used in the XS breakpoint (generally for mobile devices).

Block buttons will maintain vertical spacing when stacked.

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML, JS
  • Increased small button icon size to ‘small’ (18px); was ‘xsmall’ (12px) (#440)

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Default -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-block">{BUTTON_TEXT}</button>

<!-- Soft -->
<button type="button" class="btn btn-{TYPE} [btn-{SIZE}] btn-soft btn-block">{BUTTON_TEXT}</button>

CSS

Modifier class:
  • btn-block

LESS

The main mixin is called: _buttons(WBG)
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.

Responsive buttons

Style buttons according to grid breakpoints by appending the breakpoint to your modifier class. Breakpoints are the same as we use in the grid.

We use a ‘mobile-first’ approach here; for example btn-small becomes btn-small-md for a button that will change to Small at the medium (MD) breakpoint and wider (for both MD and LG breakpoints).

  • btn-{size}-{breakpoint}: The button will render at the given size at the given breakpoint and wider
  • btn-block-{breakpoint}: The button will be block at the given breakpoint and wider

An ‘at this breakpoint only’ option is also available.

  • btn-{size}-{breakpoint}-only: The button will render at the given size at the given breakpoint only
  • btn-block-{breakpoint}-only: The button will be block at the given breakpoint only

Tip: Use multiple responsive classes on your button to get the desired effect. Start with setting the default button size (if required), then add the smallest breakpoint class and work your way up.

Note: There are no .btn-{size}-xs or .btn-{size}-lg-only classes; simply use .btn-{size} and .btn-{size}-lg respectively.

Demo

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML, JS
  • Increased small button icon size to ‘small’ (18px); was ‘xsmall’ (12px) (#440)

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Changed 'faint' button style background color from @color-Background to @color-Light. (#311)

What’s new since v3.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Resolved issue where radio/checkbox inputs were visible in dropdowns on iOS. Also resolved some minor alignment issues with radio/checkbox dropdowns. (#299)

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! 👏
<!-- Responsive sizing -->
<button type="button" class="btn btn-{TYPE} btn-{SIZE}-{BREAKPOINT}">{BUTTON_TEXT}</button>
<button type="button" class="btn btn-{TYPE} btn-{SIZE}-{BREAKPOINT}-only">{BUTTON_TEXT}</button>

<!-- Responsive block -->
<button type="button" class="btn btn-{TYPE} btn-block-{BREAKPOINT}">{BUTTON_TEXT}</button>
<button type="button" class="btn btn-{TYPE} btn-block-{BREAKPOINT}-only">{BUTTON_TEXT}</button>

CSS

Sizing modifier classes:
  • btn-small-sm
  • btn-medium-sm
  • btn-large-sm
  • btn-xlarge-sm
  • btn-small-md
  • btn-medium-md
  • btn-large-md
  • btn-xlarge-md
  • btn-small-lg
  • btn-medium-lg
  • btn-large-lg
  • btn-xlarge-lg
  • btn-small-xs-only
  • btn-medium-xs-only
  • btn-large-xs-only
  • btn-xlarge-xs-only
  • btn-small-sm-only
  • btn-medium-sm-only
  • btn-large-sm-only
  • btn-xlarge-sm-only
  • btn-small-md-only
  • btn-medium-md-only
  • btn-large-md-only
  • btn-xlarge-md-only
Block modifier classes:
  • btn-block-sm
  • btn-block-md
  • btn-block-lg
  • btn-block-xs-only
  • btn-block-sm-only
  • btn-block-md-only

LESS

The main mixin is called: _buttons(WBG)
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.

Button icons can be positioned on the left or right of button text by reordering the internal span elements. Icon on the right is preferred. When using block buttons the icon and text will reposition to align with the button edge.

Tip: when using icons in buttons you must wrap your button text with a btn-text classed span and add a btn-icon class on your icon span. The text and icon elements should be separated by a space or new line in your markup.

Icons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML, JS
  • Increased small button icon size to ‘small’ (18px); was ‘xsmall’ (12px) (#440)

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML, JS
  • Removed stacked block buttons styling; this can be implemented per breakpoint via use of Responsive-Margins classes (e.g. .top-margin1-xs)

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML, JS
  • Fixed block button internal scrollbar bug on legacy Chrome (Windows); was showing vertical scrollbars inside some buttons
  • Added ellipsis truncation text overflow for block buttons (NB. this is not currently offered for block buttons with icons)

What’s new since v3.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Reduced border radius from 6px to 3px for all buttons
  • Increased horizontal padding to suit button size; larger buttons have slightly more horizontal padding
  • Link button (.btn-link) now has underlining on :hover, supports :disabled state and is inline-block (was inline). Note: these link buttons will no longer render as they used to with inline text.
  • Button :focus styling removed (used to match :active styling)
  • Changed the button sizing classes to our new naming convention; was .btn-size-[sm|lg|xl], now .btn-[small|large|xlarge] (incl. Button groups and Button dropdowns) (#380)
  • Extended the .btn-{size}-{breakpoint} responsive 'sizing by breakpoint' implementation; now with a 'breakpoint only' option using .btn-{size}-{breakpoint}-only classes (#382)
  • Added responsive block buttons using btn-block-{breakpoint} and btn-block-{breakpoint}-only
  • Block buttons (.btn-block) with icons now have text and icons against the left/right edge (Note: must use .btn-text and .btn-icon classes) (#383)
  • Buttons now utlilise the new icon sizes from Icons v2.0.0
  • Button icon sizing options removed; icons are now sized automatically to suit the button size (using Icons v2.0.0)
  • Buttons with icons must use .btn-text and .btn-icon classes; gap now consistent whether button is on left or right, alignment determined by markup order (Note: icon on the right is preferred)
  • Adjusted button text/icon gap (Note: ensure there is a space or line break between .btn-text and .btn-icon spans for correct gap width) (#378)
  • Optimised Dropdown button caret to work with default and block button dropdown alignment options, automatically coloured to match text color and removed .btn-dropdown-caret span from markup (this element is no longer required)
  • Fixed .btn-link sizing/alignment; now consistent with other buttons
  • New .btn-trim modifier class; strips the horizontal padding of buttons (useful for .btn-link buttons)
  • Button group block and Button dropdown block classes now .btn-group-block and .btn-dropdown-block respectively; for naming consistency
  • Button group CSS simplified; border radius managed by .btn class
  • Button group leading line text class now .btn-group-text (was .btn-group-line) for consistency, padding gap added and button group vertically aligned top; as per radios/checkboxes/switches etc.
  • All block buttons and leading line button groups (.btn-group-wrapper) can now be stacked; top margin used for separation
  • Made block button group item widths a little more even
  • Reduced CSS specificity (#346)

What’s new since v3.0.2

This version changed: