Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

Toast

v0.0.0

The Toast component is used to display brief, temporary messages to users. It typically appears at the edge of the screen (e.g., bottom-right or top-center) and automatically disappears after a short duration. Toasts are commonly used for notifications, status updates, or confirmations, like "Action successful!" or "Error occurred."

<!-- Button type: solid  -->
<button id="toaster" type="button" class="vi-btn-solid vi-btn">Toast me</button>
<script>
  $(function() {
    const toast = new vi.Toast({
      position: 'bottom-center'
    })


    $('#toaster').click(function() {
      toast.push({
        text: randomText(),
      });
    });
  });
</script>

Create a toast instance from vi.Toast. The contructor accepts the following options:

  • position string top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.
  • duration number ms before the toast disappears.
  • offset object { x: number, y: number } to offset the toast from the edge of the screen. Defaults to css values.

To create the toast, use the push method on the toast instance. The push method accepts the following options:

  • text string your message

Stylesheets #

The following stylesheet is required to display this component.

The following additional stylesheet is used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Changed

  • 16 Jan 2025 - feat(toast): art direction on Toast component transitions

Added

  • Initial draft