WP-Admin-Reference/web/app/themes/wpadminref/template-parts/sections/buttons.php

<?php
/**
 * Section buttons view
 *
 * @package wpadminref
 */

?>
<section class="section section-buttons" id="buttons">
	<header class="section-header">
		<h2>Buttons</h2>
		<hr/>
	</header>
	<div class="section-content">

		<div class="buttons-row">
			<div><p>Button Primary Small</p></div>
			<div>
				<a href="javascript:void(0)" class="button button-small button-primary">Primary Small</a> 
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;a href=&quot;#&quot; class=&quot;button button-small button-primary&quot;&gt;Primary Small&lt;/a&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="buttons-row">
			<div><p>Button Secondary Small</p></div>
			<div>
				<a href="javascript:void(0)" class="button button-small button-secondary">Secondary Small</a>
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;a href=&quot;#&quot; class=&quot;button button-small button-secondary&quot;&gt;Secondary Small&lt;/a&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="buttons-row">
			<div><p>Primary Button</p></div>
			<div><a href="javascript:void(0)" class="button button-primary">Primary Button</a></div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;a href=&quot;#&quot; class=&quot;button button-primary&quot;&gt;Primary Button&lt;/a&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="buttons-row">
			<div><p>Secondary Button</p></div>
			<div><a href="javascript:void(0)" class="button button-secondary">Secondary Button</a></div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;a href=&quot;#&quot; class=&quot;button button-secondary&quot;&gt;Secondary Button&lt;/a&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="buttons-row">
			<div><p>Hero Primary Button</p></div>
			<div><a href="javascript:void(0)" class="button button-primary button-hero">Hero Primary Button</a></div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;a href=&quot;#&quot; class=&quot;button button-primary button-hero&quot;&gt;Hero Primary Button&lt;/a&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="buttons-row">
			<div><p>Hero Secondary Button</p></div>
			<div><a href="javascript:void(0)" class="button button-hero">Hero Secondary Button</a></div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;a href=&quot;#&quot; class=&quot;button button-hero&quot;&gt;Hero Secondary Button&lt;/a&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="buttons-row">
			<div><p>Button Groups</p></div>
			<div>
				<div class="button-group">
					<a href="javascript:void(0)" class="button button-primary">Button #1</a>
					<a href="javascript:void(0)" class="button button-primary">Button #2</a>
					<a href="javascript:void(0)" class="button button-primary">Button #3</a>
				</div>
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;div class=&quot;button-group&quot;&gt;
							&lt;a href=&quot;#&quot; class=&quot;button button-primary&quot;&gt;Button #1&lt;/a&gt;
							&lt;a href=&quot;#&quot; class=&quot;button button-primary&quot;&gt;Button #2&lt;/a&gt;
							&lt;a href=&quot;#&quot; class=&quot;button button-primary&quot;&gt;Button #3&lt;/a&gt;
						&lt;/div&gt;
				</code>
				</pre>
			</div>
		</div>
	</div>
</section>