Buttons

Creating Buttons

• Use a <button> HTML element
• Apply the button class to an <a> HTML element

Disabling Buttons

• Apply the disabled HTML attribute <button disabled>
• Apply the disabled class

A link styled as a button can only appear disabled by assigning the disabled class. The link will still work. HTML links do not support a disabled attribute.

ButtonGroup

Place a group of buttons in a buttonGroup container. ButtonGroup changes to a column layout responsively.

Further control of the button layout is possible with additional classes:

• noGap
• column (vertical layout)
• left
• center
• right

When paired with an action button (ex: Cancel / Save), use a buttonGroup container, and make the red action a ghost or flat style button.

Place the committing action last (to the right/bottom).

BLUE Buttons: Non-Committing Actions; Links; Modal & Intermediary Steps

Use blue buttons for non-committing actions like links to products or other content. Think of a blue button as a regular link, but with more visual importance.

Calls to action like 'Buy This Product' or 'Sign Up' could be blue or green buttons. Use the following as a guide:

• Use a blue button if the button leads to a form or page with the product or sign up form
• Use a blue button if the button is a step in a process
• Use a blue button if the button commits and closes a modal window
• Use a green button on the page or form where the action is taken (the 'Add to Cart' or 'Join' button of the form)

Tiny

Small

Regular

Large

GREEN Buttons: Primary & Committing Actions

Use green buttons for commiting actions like adding an item to a cart, submitting a form, or completing a task. Generally, tapping a green button will lead to a result like a confirmation page, results of a report, or a next step.

A page should usually only have one green button. Modal windows are committed with a blue button. Semantic submit buttons should always be green.

Calls to action like 'Buy This Product' or 'Sign Up' could be blue or green buttons. Use the following as a guide:

• Use a blue button if the button leads to a form or page with the product or sign up form
• Use a blue button if the button is a step in a process
• Use a blue button if the button commits and closes a modal window
• Use a green button on the page or form where the action is taken (the 'Add to Cart' or 'Join' button of the form)

Tiny

Small

Regular

Large

RED Buttons: Cancel or Destructive Actions

Use red buttons for canceling, aborting, or deleting actions. A user should approach a red button with caution.

When paired with an action button (ex: Cancel / Save), use a buttonGroup

Tiny

Small

Regular

Large

Button With Icon

<button class='button blue flex'>
	<?= preg_replace("/{{class-name}}/", "importIcon", file_get_contents("../images/icons/import.svg")); ?>
	<div>Button With a pretty Icon</div>
</button>

Optional SCSS: Change the size of the svg icon

.button {
	&.specificStylingClass {
		svg {
			width: 24px;
			height: 24px;
		}
	}
}

HTML: Just an Icon

<button class='button reset specificStylingClass'>
	<?= preg_replace("/{{class-name}}/", "importIcon", file_get_contents("../images/icons/import.svg")); ?>
</button>

SCSS: Just an Icon

.specificStylingClass {
	svg {
		width: $buttonHeight;
		height: $buttonHeight;
		fill: $orange;
		transition: all $transitionDuration;
		
		path {
			transition: all $transitionDuration;
		}
	}

	&:hover {
		svg {
			path#box {
				fill: $purple;
			}

			path#arrow {
				fill: $green;
			}
		}
	}
}

Marker Flags: Like a Skinny Post-it© Page Marker

The class .markerFlag replaces the deprecated @mixin edit-this-flag that is still used in WordPress but no where else.

Marker flags don't have to be links, but they often will be.

Depending on the page, marker flags might work best with a negative left margin so they stick to the left edge of the window (outside of the article's boundary).

The negative left margin is not part of the .markerFlag class. You'll need to extend the class with the negative margin.

Tag Cloud Links

Tags are presented as links inside <li class='tag'> children of a <ul class='reset tags'> container.

• Apples
• Oranges
• Grapes
• Lemons
• Limes
• Kiwis

HTML: tag cloud

<ul class='tags'>
	<li class='tag'><a href=''>Apples</a></li>
	<li class='tag'><a href=''>Oranges</a></li>
	<li class='tag'><a href=''>Kiwis</a></li>
</ul>

Subtle Buttons

Subtle buttons are for links that need just a little bit of sparkle-dust (not for actions). For example: A blog author's name that links to their entire collection of posts, or individual tags in a tag cloud might be a subtle button.

The subtle button is also used as the base for the deprecated edit-this-flag styles, as well as the base for tags in a tag cloud.

Button Button Button
Button Button Button

Button Button Button
Button Button Button

Button Button Button
Button Button Button