<section class="section docs-section" id="toasts">
                  <h2 class="section-title">Toasts</h2>
                  <p class="docs-section-description">Toasts создаются из JS и добавляются в &#96;body&#96; вызовом &#96;.show()&#96;. Для коротких уведомлений доступны методы &#96;createInfo&#96;, &#96;createSuccess&#96;, &#96;createWarning&#96;, &#96;createDanger&#96;. Если текст не передан — toast отображается в компактном однострочном виде.</p>
                  <div class="block demo-actions">
                    <h3 class="block-title">With text</h3>
                    <button class="btn btn-primary" type="button" @click="showToast('info', { title: 'Title', text: 'Произошла ошибка. Повтори позже.' })">Show info</button>
                    <button class="btn btn-success" type="button" @click="showToast('success', { title: 'Success', text: 'Всё отлично, всё работает, это успех тостера' })">Show success</button>
                    <button class="btn btn-warning" type="button" @click="showToast('warning', { title: 'Warning', text: 'Произошла ошибка. Повтори позже.' })">Show warning</button>
                    <button class="btn btn-danger" type="button" @click="showToast('error', { title: 'Danger', text: 'Произошла ошибка. Повтори позже.' })">Show danger</button>
                  </div>
                  <div class="block demo-actions">
                    <h3 class="block-title">Title only</h3>
                    <button class="btn btn-primary" type="button" @click="showToast('info', { title: 'Document saved' })">Info</button>
                    <button class="btn btn-success" type="button" @click="showToast('success', { title: 'Synced' })">Success</button>
                    <button class="btn btn-warning" type="button" @click="showToast('warning', { title: 'Offline mode' })">Warning</button>
                    <button class="btn btn-danger" type="button" @click="showToast('error', { title: 'Connection lost' })">Danger</button>
                  </div>

<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Toasts JS</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-javascript">Toasts.createSuccess(
  "Success",
  "Операция выполнена успешно",
  { lifetime: 4000, alone: true }
).show();

Toasts.createDanger("Error", "Произошла ошибка").show();

// Title only — compact single-line toast
Toasts.createInfo("Saved").show();</code></pre>
	</div>
</section>