KSS Style Guide

Button Filled

Toggle example guides Toggle HTML markup

4 types of default buttons atoms

<insert-markup>blocks.buttons.filled-</insert-markup>
Click me
.has-black-color
default button
<insert-markup>blocks.buttons.filled-0</insert-markup>
Click me
.has-text-base-color
secondary button
<insert-markup>blocks.buttons.filled-1</insert-markup>
Click me
.has-gray-base-color
Success button
<insert-markup>blocks.buttons.filled-2</insert-markup>
Click me
.has-gray-darken-color
Warning button
<insert-markup>blocks.buttons.filled-3</insert-markup>
Click me
.has-success-base-color
Ghost version button
<insert-markup>blocks.buttons.filled-4</insert-markup>
Click me
.has-black-background-color
next
<insert-markup>blocks.buttons.filled-5</insert-markup>
Click me
.has-gray-base-background-color
next
<insert-markup>blocks.buttons.filled-6</insert-markup>
Click me
.has-primary-base-background-color
next
<insert-markup>blocks.buttons.filled-7</insert-markup>
Click me
Markup: ..\..\styleguide\templates\blocks\buttons-filled.html 
<div class="wp-block-buttons">
	<div class="wp-block-button is-style-fill">
		<a href="#" class="wp-block-button__link [modifier class]">
			Click me
		</a>
	</div>
</div>
Source: ../source/sass/05-blocks/button/_style.scss, line 1