<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">
                    <GnButton variant="primary">Primary</GnButton>
                    <GnButton variant="primary" icon="ph-house">Primary</GnButton>
                    <GnButton variant="secondary" icon="ph-code">Secondary</GnButton>
                    <GnButton variant="accent" icon="ph-envelope-simple">Accent</GnButton>
                    <GnButton variant="info" icon="ph-question">Info</GnButton>
                    <GnButton variant="danger" icon="ph-brackets-curly">Danger</GnButton>
                    <GnButton variant="warning" icon="ph-warning">Warning</GnButton>
                    <GnButton variant="success" icon="ph-codepen-logo">Success</GnButton>
                  </div>
                  <div class="block demo-actions">
                    <GnButton variant="primary" size="sm">Small</GnButton>
                    <GnButton variant="primary" size="sm" icon="ph-warning">Small</GnButton>
                    <GnButton variant="warning" size="sm" icon="ph-warning">Small</GnButton>
                    <GnButton variant="primary">Normal</GnButton>
                    <GnButton variant="primary" size="lg">Large</GnButton>
                  </div>
                  <div class="block demo-actions">
                    <GnButton variant="primary" disabled>Disabled</GnButton>
                    <GnButton variant="primary" disabled icon="ph-warning">Disabled</GnButton>
                    <GnButton variant="success" size="sm" icon="ph-bold ph-spinner" loading>Loading</GnButton>
                    <GnButton variant="warning" icon="ph-bold ph-spinner" loading>Loading</GnButton>
                  </div>
                  <h3 class="section-subtitle">Copy button</h3>
                  <p class="docs-section-description">Кнопка копирования на основе .btn-icon. В Vue-адаптере используй GnCopyButton.</p>
                  <div class="block demo-actions">
                    <GnCopyButton text="ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC7" />
                    <GnCopyButton text="compact-secret" size="sm" />
                    <GnCopyButton text="disabled" disabled />
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Buttons HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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>