WPMU DEV Shared UI

Regular Button

Default The class sui-button determines the base markup for any button that contains text.

<button class="sui-button">Button</button>

Outlined This variation can come with border only and transparent background. For those cases you can make use of sui-button-ghost class.

<button class="sui-button sui-button-ghost">Button</button>

Large There are some cases when you gonna need to make use of bigger buttons, to achieve this you can add sui-button-lg class.

<button class="sui-button sui-button-lg">Button</button>

Disabled As simple as it sounds, you can add disabled attribute to button element or disabled class if you are using link element.

<button class="sui-button" disabled>Button</button>
<a role="button" class="sui-button disabled">Button</a>

Colorize Buttons

There are some cases when you gonna need buttons with specific colors, to achieve this you can add sui-button-{color_name} extra class.

To try each button color variation click on the options below:

Blue

Green

Red

Orange

Yellow

Purple

White

Default

<button class="sui-button sui-button-blue">Button</button>

Outlined

<button class="sui-button sui-button-ghost sui-button-blue">Button</button>

Large

<button class="sui-button sui-button-blue sui-button-lg">Button</button>

Disabled

<button class="sui-button sui-button-blue" disabled>Button</button>
<button class="sui-button sui-button-ghost sui-button-blue" disabled>Button</button>

Default

<button class="sui-button sui-button-green">Button</button>

Outlined

<button class="sui-button sui-button-ghost sui-button-green">Button</button>

Large

<button class="sui-button sui-button-green sui-button-lg">Button</button>

Disabled

<button class="sui-button sui-button-green" disabled>Button</button>
<button class="sui-button sui-button-ghost sui-button-green" disabled>Button</button>

Default

<button class="sui-button sui-button-red">Button</button>

Outlined

<button class="sui-button sui-button-ghost sui-button-red">Button</button>

Large

<button class="sui-button sui-button-red sui-button-lg">Button</button>

Disabled

<button class="sui-button sui-button-red" disabled>Button</button>
<button class="sui-button sui-button-ghost sui-button-red" disabled>Button</button>

Default

<button class="sui-button sui-button-orange">Button</button>

Outlined

<button class="sui-button sui-button-ghost sui-button-orange">Button</button>

Large

<button class="sui-button sui-button-orange sui-button-lg">Button</button>

Disabled

<button class="sui-button sui-button-orange" disabled>Button</button>
<button class="sui-button sui-button-ghost sui-button-orange" disabled>Button</button>

Default

<button class="sui-button sui-button-yellow">Button</button>

Outlined

<button class="sui-button sui-button-ghost sui-button-yellow">Button</button>

Large

<button class="sui-button sui-button-yellow sui-button-lg">Button</button>

Disabled

<button class="sui-button sui-button-yellow" disabled>Button</button>
<button class="sui-button sui-button-ghost sui-button-yellow" disabled>Button</button>

Default

<button class="sui-button sui-button-purple">Button</button>

Outlined

<button class="sui-button sui-button-ghost sui-button-purple">Button</button>

Large

<button class="sui-button sui-button-purple sui-button-lg">Button</button>

Disabled

<button class="sui-button sui-button-purple" disabled>Button</button>
<button class="sui-button sui-button-ghost sui-button-purple" disabled>Button</button>

Default

<button class="sui-button sui-button-white">Button</button>

Outlined

<button class="sui-button sui-button-ghost sui-button-white">Button</button>

Large

<button class="sui-button sui-button-white sui-button-lg">Button</button>

Disabled

<button class="sui-button sui-button-white" disabled>Button</button>
<button class="sui-button sui-button-ghost sui-button-white" disabled>Button</button>

Button with Icon

Left Icon You don't need an extra class, just place the icon at left of the text and it will align correctly.

<button class="sui-button">
	<span class="sui-icon-academy" aria-hidden="true"></span> Button
</button>

Right Icon Use sui-button-icon-right class to add the correct spacing between text and icon when you place the icon at right of the text.

<button class="sui-button sui-button-icon-right">
	Button <span class="sui-icon-academy" aria-hidden="true"></span>
</button>

Loading Button

Loader Only

Default

<!--
NOTE:
To put this button on "loading" state just include
`sui-button-onload` class next to `sui-button`.
-->
<button type="button" class="sui-button">

	<!-- Content Wrapper -->
	<span class="sui-loading-text">Button</span>

	<!-- Spinning loading icon -->
	<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>

</button>

Text with Icon

<!--
NOTE:
To put this button on "loading" state just include
`sui-button-onload` class next to `sui-button`.
-->
<button type="button" class="sui-button">

	<!-- Content Wrapper -->
	<span class="sui-loading-text">
	<span class="sui-icon-academy" aria-hidden="true"></span> Button
	</span>

	<!-- Spinning loading icon -->
	<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>

</button>

Loader with Text

Default

<!--
NOTE:
1. To put this button on "loading" state just include
`sui-button-onload-text` class next to `sui-button`.
2. If button is inside a container with `aria-live="polite"`,
there's no need on adding it again. You can safely remove that
attribute from button.
-->
<button type="button" class="sui-button" aria-live="polite">

	<!-- Default State Content -->
	<span class="sui-button-text-default">Button</span>

	<!-- Loading State Content -->
	<span class="sui-button-text-onload">
		<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
		Loading State
	</span>

</button>

Default

<!--
NOTE:
1. To put this button on "loading" state just include
`sui-button-onload-text` class next to `sui-button`.
2. If button is inside a container with `aria-live="polite"`,
there's no need on adding it again. You can safely remove that
attribute from button.
-->
<button type="button" class="sui-button" aria-live="polite">

	<!-- Default State Content -->
	<span class="sui-button-text-default">
		<span class="sui-icon-academy" aria-hidden="true"></span> Button
	</span>

	<!-- Loading State Content -->
	<span class="sui-button-text-onload">
		<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
		Loading State
	</span>

</button>

Compound Button

About In some parts of the design you gonna find buttons transformed into icons only buttons on small screens.

Regular Button This is the basic structure of a compound button, text with icon on desktop and icon only on small screens.

<button type="button" class="sui-button sui-button-compound">

	<!-- Content for large screens -->
	<span class="sui-compound-desktop" aria-hidden="true">
	<span class="sui-icon-academy"></span>
	Compound Button
	</span>

	<!-- Content for small screens -->
	<span class="sui-compound-mobile" aria-hidden="true">
	<span class="sui-icon-academy"></span>
	</span>

	<!-- Button label for screen readers -->
	<span class="sui-screen-reader-text">Compound Button</span>

</button>

Loading Button This is a regular compound button that includes an icon spinning animation when an action is being performed, e.g. when saving changes. Button on default state: Button on loading state:

<!--
NOTE:
To put this button on "loading" state just include
`sui-button-onload` class next to `sui-button`.
-->
<button class="sui-button sui-button-compound">

	<!-- Content Wrapper -->
	<span class="sui-loading-text" aria-hidden="true">

		<!-- Content for large screens -->
		<span class="sui-compound-desktop">
		<span class="sui-icon-academy"></span>
		Compound Button
		</span>

		<!-- Content for small screens -->
		<span class="sui-compound-mobile">
		<span class="sui-icon-academy"></span>
		</span>

	</span>

	<!-- Spinning loading icon -->
	<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>

	<!-- Button label for screen readers -->
	<span class="sui-screen-reader-text">Compound Button</span>

</button>

Dashed Button

This button is used with builder element and always have a 100% width and 60px height. It's made this big to highlight so users can easily click on it to perform an action like adding a new element.

Default – 60px Height

<button type="button" class="sui-button sui-button-dashed">
	<span class="sui-icon-plus" aria-hidden="true"></span>
	Dashed Button
</button>

Large – 70px Height

<button type="button" class="sui-button sui-button-dashed sui-lg">
	<span class="sui-icon-plus" aria-hidden="true"></span>
	Dashed Button
</button>

Regular Button

Colorize Buttons

Button with Icon

Loading Button

Compound Button

Dashed Button

Documentation