<section class="section docs-section" id="chips">
	<h2 class="section-title">Chips</h2>
	<p class="docs-section-description">
		Chips используются для фильтров, коротких labels, selectable states и removable tokens.
	</p>

	<div class="block">
		<h3 class="block-title">Static chips</h3>

		<div class="chip-group">
			<span class="chip chip-primary">Primary</span>
			<span class="chip chip-secondary">Secondary</span>
			<span class="chip chip-success">Success</span>
			<span class="chip chip-warning">Warning</span>
			<span class="chip chip-danger">Error</span>
			<span class="chip chip-secondary">
				<i class="ph ph-funnel"></i>
				Filtered
			</span>
		</div>
	</div>

	<div class="block">
		<h3 class="block-title">Selectable chips</h3>

		<div class="chip-group" aria-label="Filter chips">
			<button class="chip chip-selected" type="button" aria-pressed="true">Active</button>
			<button class="chip" type="button" aria-pressed="false">Queued</button>
			<button class="chip" type="button" aria-pressed="false">Failed</button>
			<button class="chip chip-disabled" type="button" disabled>Archived</button>
		</div>
	</div>

	<div class="block">
		<h3 class="block-title">Removable chips</h3>

		<div class="chip-group" aria-label="Selected tags">
			<span class="chip">
				Frontend
				<button class="chip-remove" type="button" aria-label="Remove Frontend">
					<i class="ph ph-x"></i>
				</button>
			</span>
			<span class="chip chip-success">
				Design
				<button class="chip-remove" type="button" aria-label="Remove Design">
					<i class="ph ph-x"></i>
				</button>
			</span>
			<span class="chip chip-warning">
				Review
				<button class="chip-remove" type="button" aria-label="Remove Review">
					<i class="ph ph-x"></i>
				</button>
			</span>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Static Chips HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="chip-group"&gt;
  &lt;span class="chip chip-primary"&gt;Primary&lt;/span&gt;
  &lt;span class="chip chip-secondary"&gt;Secondary&lt;/span&gt;
  &lt;span class="chip chip-success"&gt;Success&lt;/span&gt;
  &lt;span class="chip"&gt;
    &lt;i class="ph ph-funnel"&gt;&lt;/i&gt;
    Filtered
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Selectable Chips HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="chip-group" aria-label="Filter chips"&gt;
  &lt;button class="chip chip-selected" type="button" aria-pressed="true"&gt;Active&lt;/button&gt;
  &lt;button class="chip" type="button" aria-pressed="false"&gt;Queued&lt;/button&gt;
  &lt;button class="chip" type="button" aria-pressed="false"&gt;Failed&lt;/button&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Removable Chips HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;span class="chip"&gt;
  Frontend
  &lt;button class="chip-remove" type="button" aria-label="Remove Frontend"&gt;
    &lt;i class="ph ph-x"&gt;&lt;/i&gt;
  &lt;/button&gt;
&lt;/span&gt;</code></pre>
	</div>
</section>