The toaster element is for displaying short-lived popup notifications or information on the edges of the screen. It does not have any specific child elements that it formats, it instead allows for any kind of styled element to be used to display the messages (exmamples use the Notification component to show the locations).
<ws-toaster ws-x="[$tc]">
<ws-notification ws-x="[$color @secondary]">
<ws-icon class="ti-trophy">
Success!
</ws-icon>
</ws-notification>
</ws-toaster>
<ws-toaster ws-x="[$tr]">
<ws-notification ws-x="[$color @secondary]">
<ws-icon class="ti-trophy">
Success!
</ws-icon>
</ws-notification>
</ws-toaster>
<ws-toaster ws-x="[$bl]">
<ws-notification ws-x="[$color @warning]">
<ws-icon class="ti-trophy">
Almost Success!
</ws-icon>
</ws-notification>
<ws-notification ws-x="[$color @accent]">
<ws-icon class="ti-trophy">
Information?
</ws-icon>
</ws-notification>
</ws-toaster>
<ws-toaster ws-x="[$bc]">
<ws-notification ws-x="[$color @warning]">
<ws-icon class="ti-trophy">
Almost Success!
</ws-icon>
</ws-notification>
<ws-notification ws-x="[$color @accent]">
<ws-icon class="ti-trophy">
Information?
</ws-icon>
</ws-notification>
</ws-toaster>
<ws-toaster ws-x="[$br]">
<ws-notification ws-x="[$color @warning]">
<ws-icon class="ti-trophy">
Almost Success!
</ws-icon>
</ws-notification>
<ws-notification ws-x="[$color @accent]">
<ws-icon class="ti-trophy">
Information?
</ws-icon>
</ws-notification>
</ws-toaster>
<ws-toaster ws-x="[$ml]">
<ws-notification ws-x="[$color @accent]">
<ws-icon class="ti-trophy">
Information?
</ws-icon>
</ws-notification>
</ws-toaster>
<ws-toaster ws-x="[$mr]">
<ws-notification ws-x="[$color @accent]">
<ws-icon class="ti-trophy">
Information?
</ws-icon>
</ws-notification>
</ws-toaster>