keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Toastr

toastr.

toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. Click here

Toast Type

You can call the toastr.success(), toastr.error(), toastr.info(), or toastr.warning() methods, depending on the type of notification you want to show.


<button type="button" class="btn btn-success" id="toastr-success-top-right">Success</button>
<button type="button" class="btn btn-info" id="toastr-info-top-right">Info</button>
<button type="button" class="btn btn-warning" id="toastr-warning-top-right">Warning</button>
<button type="button" class="btn btn-danger" id="toastr-error-top-right">Error</button>
<button type="button" class="btn btn-primary" id="toastr-progress-top-right">Progress Bar</button>
<button type="button" class="btn btn-light" id="toastr-clear-top-right">Close button</button>

Toastr Positions

You can specify the position of the notifications using Toastr options.


<button type="button" class="btn btn-primary" id="toastr-top-right">Top Right</button>
<button type="button" class="btn btn-primary" id="toastr-bottom-right">Bottom Right</button>
<button type="button" class="btn btn-primary" id="toastr-bottom-left">Bottom Left</button>
<button type="button" class="btn btn-primary" id="toastr-top-left">Top Left</button>
<button type="button" class="btn btn-primary" id="toastr-top-full-width">Bottom Full Width</button>
<button type="button" class="btn btn-primary" id="toastr-top-center">Top Center</button>
<button type="button" class="btn btn-primary" id="toastr-bottom-center">Bottom Center</button>