Jumpstart docs logo Back to the app

Alerts & Notices

Alerts

Alerts with actions

Notices

Toast Notifications

Toast notifications are visible in the upper right corner of this page. You can create toast notifications by passing a hash of options to the flash object. Behind the scenes the flash object is used to instantiate and render an instance of the ToastComponent class found at app/components/toast_component.rb. The following examples show how to create various toast notifications: 

# Basic Example
flash[:notice] = {
  title: "Basic Example",
  description: "Toast description goes here."
}

You can also use the ToastComponent directly if you would like by instantiating an instance of the class as shown below: 

# Using the ToastComponent Class
render ToastComponent.new(title: "Basic Example", description: "Toast description goes here.")

Toasts can also have icons. By default Jumpstart provides named icons for :alert, :notice, :success, :default values. To use a built-in named icon pass the name of the icon as the value to the icon_name: option as shown in the following examples below: 

# Toast with icon
flash[:notice] = {
  title: "Toast with icon",
  description: "This is a toast description.",
  icon_name: :notice # Supported values: :alert, :notice, :success, :default
}

# Toast with icon
render ToastComponent.new(title: "Basic Example", description: "Toast description goes here.", icon_name: :success)

There is also the option to use a custom icon by passing a block when instantiating a ToastComponent that calls capture_for :icon as shown in the below example: 

# Toast with custom icon
render ToastComponent.new title: "Toast with icon", description: "This is a toast description." do |component|
  component.capture_for :icon do
   <-- custom SVG here -->
  end
end

Toast notifications can also have a link to help navigate users to completing any follow-up actions or next steps. To add such a link pass a hash to the link option with the text and url keys and their values in hash passed to the flash object as shown in the example below: 

# Toast with link
flash[:notice] = {
  title: "Deployment successful.",
  description: "This is a toast description.",
  icon: :success,
  link: {text: "View", url: root_path}
}

Or via capture_for :link when using a ToastComponent directly: 

# Toast with link
render ToastComponent.new title: "Auto-dismissing toast", description: "This is a toast description." do |component|
  component.capture_for :link do
    link_to "View", root_path
  end
end

Toast notifications can also be set to dismiss automatically (user does not have to click the close button to remove the toast notification). To create an auto-dismissing toast notification set the dismissable option to false and then set the interval which the toast will be auto-dismissed after via the dismiss_after option as shown in the following example: 

# Auto-dismissing toast
flash[:notice] = {
  title: "Auto-dismissing toast",
  description: "This is a toast description.",
  icon: :default,
  link: {text: "View", url: root_path}
  dismissable: false,
  dismiss_after: 5000,
}

# Auto-dismissing toast
render(ToastComponent.new title: "Auto-dismissing toast", description: "This is a toast description.", dismissable: false, dismiss_after: 5000)