Clone: Buttons

Just a heads up!

Clone's documentation uses Cookies and Google Analytics to help us better understand our visitors. By viewing this site, you agree to have this basic information collected and relayed back to us. You can learn more about how Google Analytics provides us with this information here.

About Buttons

A description for this component is coming soon! You can check out the code below in the meantime.

More Info See Examples Changelog

Button Accessibility

A description of how this component is accessible is on its way!

Code Snippet

<!-- Button -->
<button data-c-button="solid(stop)" type="button">
    <!-- Optional Icon -->
    <span>Button Text</span>
    <!-- Optional Icon -->
</button>

Detailed Information

Coming soon!

Examples

Button Variations

Hyperlink

Solid Buttons

Outlined Buttons

"Stoplight" Buttons

Disabled Buttons

Buttons with Icons

Changelog

Version 2.4.15

Updated buttons to support images as their child icon instead of just icon fonts.

Version 2.4.3

Fixes a bug with spans inside buttons.

Version 2.4.2

Fixes a bug introduced by data-c-button="reset" where borders wouldn't show on regular buttons.

Version 2.4.1

Updates buttons to require a span if using an icon.
- This also allows icons on either side of the button's content.
Fixed line height of icons inside buttons.
Adds data-c-button="reset" to allow for buttons that don't need generic button styling.
- This removes borders, backgrounds, and adds a cursor: pointer; value.

Version 2.3.10

Fixes a bug with icon font size in buttons.