Buttons

Basic

For button, submit, and reset, use <button> instead of <input>

<button type="button">Click Me</button>
<button type="submit">Submit & Save</button>
<button type="reset">Reset Form</button>

.button controls for some default behaviors of all buttons. Use .button_rounded to add rounded corners.

.button_color-default is a default class that makes basic gray buttons. If a button is disabled, use .button_color-default--muted instead.

<button type="button" class="button button_color-default">Click Me</button>
<button type="button" class="button button_rounded button_color-default--muted">Don't Click Me</button>

Icons

Use .button_icon-only for buttons that are just an icon.

<!-- buttons that are just an icon -->
<button type="button" class="button button_icon-only button_color-default">
	<svg class="icon icon_fill"><use href="/images/core-icons.svg#iconName"></use></svg>
</button>

<button type="button" class="button button_icon-only button_color-default button_rounded">
	<svg class="icon icon_fill"><use href="/images/core-icons.svg#iconName"></use></svg>
</button>

Use a <span> with class .icon_inline, just like icons in other areas of text, to include an icon with a label in a button. More details about icons found on the Icons page.

<!-- An icon on the right side -->
<button type="button" class="button button_color-default">
	Click Me
	<span class="icon_inline">
		<svg class="icon icon_fill" role="img" aria-label="icon description">
			<use href="/images/core-icons.svg#iconName"></use>
		</svg>
	</span>
</button>

<!-- An icon on the left side -->
<button type="button" class="button button_color-default">
	<span class="icon_inline">
		<svg class="icon icon_fill" role="img" aria-label="icon description">
			<use href="/images/core-icons.svg#iconName"></use>
		</svg>
	</span>
	Click Me
</button>

Input File

<div class="file-select file-select_color-default">
	<input type="file" name="file" id="file" class="file-select__input"/>
	<button class="file-select__button" type="button">Choose File</button>
	<span class="file-select__label"></span>
	<button class="file-select__clear" type="button" title="clear media uploader">
		<svg class="icon icon_fill" role="img" aria-label="ex">
			<use href="/images/core-icons.svg#icon-exMark" />
		</svg>
	</button>
</div>

Array.prototype.forEach.call(
	document.querySelectorAll(".file-select__button"),
	function(button) {
		const hiddenInput = button.parentElement.querySelector(".file-select__input");
		const label = button.parentElement.querySelector(".file-select__label");
		const clearButton = button.parentElement.querySelector(".file-select__clear");
		const defaultLabelText = "No file selected";

		// Set default text for label
		label.textContent = defaultLabelText;

		button.addEventListener("click", function() {
			hiddenInput.click();
		});

		hiddenInput.addEventListener("change", function() {
			const filenameList = Array.prototype.map.call(hiddenInput.files, function(file) {
				return file.name;
			});

			label.textContent = filenameList.join(", ") || defaultLabelText;
			label.title = label.textContent;

			// show clear
			clearButton.style.display = "block";
		});

		clearButton.addEventListener("click", function() {
			// empty hidden input
			hiddenInput.value = '';

			// reset default text for label
			label.textContent = defaultLabelText;

			// hide clear
			clearButton.style.display = "none";
		});
	}
);