<section class="section docs-section" id="buttons">
	<h2 class="section-title">Buttons</h2>
	<p class="docs-section-description">
		Кнопки собираются из базового класса `.btn`, цветового модификатора и опционального размера.
		Для иконок добавляй `.with-icon`, а состояние загрузки помечай `.loading-state`.
	</p>

	<div class="block demo-actions">
		<button class="btn btn-primary">Primary</button>
		<button class="btn btn-primary with-icon"><i class="ph ph-house"></i> Primary</button>
		<button class="btn btn-secondary with-icon"><i class="ph ph-code"></i> Secondary</button>
		<button class="btn btn-accent with-icon"><i class="ph ph-envelope-simple"></i> Accent</button>
		<button class="btn btn-info with-icon"><i class="ph ph-question"></i> Info</button>
		<button class="btn btn-danger with-icon"><i class="ph ph-brackets-curly"></i> Danger</button>
		<button class="btn btn-warning with-icon"><i class="ph ph-warning"></i> Warning</button>
		<button class="btn btn-success with-icon"><i class="ph ph-codepen-logo"></i> Success</button>
	</div>

	<div class="block demo-actions">
		<button class="btn btn-primary btn-small">Small</button>
		<button class="btn btn-primary with-icon btn-small"><i class="ph ph-warning"></i> Small</button>
		<button class="btn btn-warning btn-small with-icon"><i class="ph ph-warning"></i> Small</button>
		<button class="btn btn-primary">Normal</button>
		<button class="btn btn-primary btn-large">Large</button>
	</div>

	<div class="block demo-actions">
		<button class="btn btn-primary" disabled>Disabled</button>
		<button class="btn btn-primary with-icon" disabled>
			<i class="ph ph-warning"></i> Disabled
		</button>
		<button class="btn btn-success btn-small with-icon loading-state" disabled><i class="ph-bold ph-spinner"></i> Loading</button>
		<button class="btn btn-warning with-icon loading-state" disabled><i class="ph-bold ph-spinner"></i> Loading</button>
	</div>

	<h3 class="section-subtitle">Copy button</h3>
	<p class="docs-section-description">
		Кнопка копирования на основе <code>.btn-icon</code>. В Vue-адаптере используй <code>GnCopyButton</code>.
	</p>
	<div class="block demo-actions">
		<button class="btn btn-icon btn-secondary" type="button" aria-label="Copy" onclick="navigator.clipboard.writeText('ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC7'); this.classList.add('copied'); setTimeout(() => this.classList.remove('copied'), 3000);">
			<i class="ph ph-copy"></i>
		</button>
		<button class="btn btn-icon btn-secondary" type="button" aria-label="Copy" disabled>
			<i class="ph ph-copy"></i>
		</button>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Buttons HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;button class="btn btn-primary"&gt;Primary&lt;/button&gt;
&lt;button class="btn btn-secondary with-icon"&gt;
  &lt;i class="ph ph-code"&gt;&lt;/i&gt;
  Secondary
&lt;/button&gt;
&lt;button class="btn btn-warning btn-small"&gt;Small&lt;/button&gt;
&lt;button class="btn btn-success with-icon loading-state" disabled&gt;
  &lt;i class="ph-bold ph-spinner"&gt;&lt;/i&gt;
  Loading
&lt;/button&gt;</code></pre>
	</div>
</section>