Base

Class	Description
.ui-toast	Base class

Variant

Class	Value
.ui-toast--success	success
.ui-toast--warning	warning
.ui-toast--danger	danger
.ui-toast--info	info

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-toast-viewport-gap	calc(var(--ui-unit) * 1)	Viewport gap
--ui-toast-viewport-padding	calc(var(--ui-unit) * 2)	Viewport padding
--ui-toast-viewport-max-width	var(--ui-toast-viewport-max-width)	Viewport max width
--ui-toast-padding	calc(var(--ui-unit) * 2)	Padding on all sides
--ui-toast-gap	calc(var(--ui-unit) * 1)	Gap between children
--ui-toast-radius	var(--ui-radius-md)	Corner radius
--ui-toast-bg	var(--ui-color-bg)	Background color
--ui-toast-border-color	var(--ui-color-border)	Border color
--ui-toast-shadow	var(--ui-shadow-lg)	Box shadow

<div class="ui-toast ui-toast--success">
  <div class="ui-toast__content">
    <p class="ui-toast__title">Success</p>
    <p class="ui-toast__description">Operation completed successfully.</p>
  </div>
</div>
<div class="ui-toast ui-toast--warning">
  <div class="ui-toast__content">
    <p class="ui-toast__title">Warning</p>
    <p class="ui-toast__description">Please review before continuing.</p>
  </div>
</div>
<div class="ui-toast ui-toast--danger">
  <div class="ui-toast__content">
    <p class="ui-toast__title">Error</p>
    <p class="ui-toast__description">Something went wrong.</p>
  </div>
</div>
<div class="ui-toast ui-toast--info">
  <div class="ui-toast__content">
    <p class="ui-toast__title">Info</p>
    <p class="ui-toast__description">New updates available.</p>
  </div>
</div>

<div class="ui-toast">
  <div class="ui-toast__content">
    <p class="ui-toast__title">File deleted</p>
    <p class="ui-toast__description">document.pdf was moved to trash.</p>
  </div>
  <button class="ui-toast__action ui-button ui-button--sm ui-button--secondary">Undo</button>
  <button class="ui-toast__close">X</button>
</div>

<!-- Container positions for toast placement -->
<div class="demo-container">
  <div class="ui-toast-viewport ui-toast-viewport--top-end ui-absolute">
    <div class="ui-toast">
      <div class="ui-toast__content">
        <p class="ui-toast__title">Top End</p>
      </div>
    </div>
  </div>
</div>
<div class="demo-container">
  <div class="ui-toast-viewport ui-toast-viewport--bottom-end ui-absolute">
    <div class="ui-toast">
      <div class="ui-toast__content">
        <p class="ui-toast__title">Bottom End</p>
      </div>
    </div>
  </div>
</div>
<div class="demo-container">
  <div class="ui-toast-viewport ui-toast-viewport--top-start ui-absolute">
    <div class="ui-toast">
      <div class="ui-toast__content">
        <p class="ui-toast__title">Top Start</p>
      </div>
    </div>
  </div>
</div>
<div class="demo-container">
  <div class="ui-toast-viewport ui-toast-viewport--top-center ui-absolute">
    <div class="ui-toast">
      <div class="ui-toast__content">
        <p class="ui-toast__title">Top Center</p>
      </div>
    </div>
  </div>
</div>
<div class="demo-container">
  <div class="ui-toast-viewport ui-toast-viewport--bottom-start ui-absolute">
    <div class="ui-toast">
      <div class="ui-toast__content">
        <p class="ui-toast__title">Bottom Start</p>
      </div>
    </div>
  </div>
</div>
<div class="demo-container">
  <div class="ui-toast-viewport ui-toast-viewport--bottom-center ui-absolute">
    <div class="ui-toast">
      <div class="ui-toast__content">
        <p class="ui-toast__title">Bottom Center</p>
      </div>
    </div>
  </div>
</div>