Fixed Confirmation Toast

Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.

NOTE: z index for Fixed Confirmation Toast is set to 'max' by default which has the value of 999999. the z Index global prop can be used to override this if you want to set it to a different value.

Summary

Uses Icons

Javascript Enhanced

Default

Error Message

Items Successfully Moved

Scan to Assign Selected Items

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Error Message",
  status: "error",
  closeable: true
})%>

<br><br>

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Items Successfully Moved",
  status: "success"
})%>

<br><br>

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Scan to Assign Selected Items",
  status: "neutral"
})%>

Nav Margin Top

Top nav Margin.

Use the nav_margin_top prop to position the toast lower on the page. This is useful for cases where we want to position the toast below a header or nav.

<%= pb_rails("button", props: { text: "Top Nav Toast", variant: "secondary", data: { toast: "#top-nav" } }) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "top-nav-margin",
  closeable: true,
  id: "top-nav",
  multi_line: true,
  text: "Top nav Margin.",
  status: "tip",
  vertical: "top",
  horizontal: "center",
  nav_margin_top: true
}) %>

<script type="text/javascript">
  const navtoast = document.querySelectorAll(".top-nav-margin")
  const navbutton = document.querySelectorAll("button[data-toast]")

  const hideNavToast = () => {
    navtoast.forEach((toast) => {
      toast.style.display = "none"
    })
  }

  // Hide toasts immediately
  hideNavToast()

  // Handle various page load/restore events
  window.addEventListener('pageshow', hideNavToast)
  document.addEventListener('DOMContentLoaded', hideNavToast)
  document.addEventListener('turbolinks:load', hideNavToast)
  document.addEventListener('turbo:load', hideNavToast)

  navbutton.forEach((button) => {
    button.onclick = () => {
      hideNavToast()
      let toast = document.querySelector(button.getAttribute("data-toast"))

      if (toast) {
        toast.style.display = "flex"
      }
    }
  })
</script>

Multi Line

Multi-line is used when the given text will not fit on one line.

Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.

Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.

<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "multitoast-to-hide",
  closeable: true,
  id: "toast-short",
  multi_line: true,
  text: "Multi-line is used when the given text will not fit on one line.",
  status: "tip",
  vertical: "top",
  horizontal: "center"
}) %>

<%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "multitoast-to-hide",
  closeable: true,
  id: "toast-long",
  multi_line: true,
  text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
  status: "tip",
  vertical: "top",
  horizontal: "center"
}) %>

<script type="text/javascript">
  const multitoasts = document.querySelectorAll(".multitoast-to-hide")
  const multibuttons = document.querySelectorAll("button[data-multitoast]")

  const hideMultiToasts = () => {
    multitoasts.forEach((toast) => {
      toast.style.display = "none"
    })
  }

  // Hide toasts immediately
  hideMultiToasts()

  // Handle various page load/restore events
  window.addEventListener('pageshow', hideMultiToasts)
  document.addEventListener('DOMContentLoaded', hideMultiToasts)
  document.addEventListener('turbolinks:load', hideMultiToasts)
  document.addEventListener('turbo:load', hideMultiToasts)

  multibuttons.forEach((button) => {
    button.onclick = () => {
      hideMultiToasts()
      let toast = document.querySelector(button.getAttribute("data-multitoast"))

      if (toast) {
        toast.style.display = "flex"
      }
    }
  })
</script>

Click to Close

Error Message

Items Successfully Moved

Scan to Assign Selected Items

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Error Message",
  status: "error",
  closeable: true
})%>

<br><br>

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Items Successfully Moved",
  status: "success",
  closeable: true
})%>

<br><br>

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Scan to Assign Selected Items",
  status: "neutral",
  closeable: true
})%>

Click to Show Positions

Top Center

Top Left

Top Right

Bottom Center

Bottom Left

Bottom Right

<%= pb_rails("button", props: { text: "Top Center", variant: "secondary", data: { toast: "#toast-top-center" } }) %>
<%= pb_rails("button", props: { text: "Top Left", variant: "secondary", data: { toast: "#toast-top-left" } }) %>
<%= pb_rails("button", props: { text: "Top Right", variant: "secondary", data: { toast: "#toast-top-right" } }) %>
<%= pb_rails("button", props: { text: "Bottom Center", variant: "secondary", data: { toast: "#toast-bottom-center" } }) %>
<%= pb_rails("button", props: { text: "Bottom Left", variant: "secondary", data: { toast: "#toast-bottom-left" } }) %>
<%= pb_rails("button", props: { text: "Bottom Right", variant: "secondary", data: { toast: "#toast-bottom-right" } }) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "toast-to-hide",
  closeable: true,
  id: "toast-top-center",
  text: "Top Center",
  status: "neutral",
  vertical: "top",
  horizontal: "center"
}) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "toast-to-hide",
  closeable: true,
  id: "toast-top-left",
  text: "Top Left",
  status: "neutral",
  vertical: "top",
  horizontal: "left"
}) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "toast-to-hide",
  closeable: true,
  id: "toast-top-right",
  text: "Top Right",
  status: "neutral",
  vertical: "top",
  horizontal: "right"
}) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "toast-to-hide",
  closeable: true,
  id: "toast-bottom-center",
  text: "Bottom Center",
  status: "neutral",
  vertical: "bottom",
  horizontal: "center"
}) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "toast-to-hide",
  closeable: true,
  id: "toast-bottom-left",
  text: "Bottom Left",
  status: "neutral",
  vertical: "bottom",
  horizontal: "left"
}) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  classname: "toast-to-hide",
  closeable: true,
  id: "toast-bottom-right",
  text: "Bottom Right",
  status: "neutral",
  vertical: "bottom",
  horizontal: "right"
}) %>

<script type="text/javascript">
  const toasts = document.querySelectorAll(".toast-to-hide")
  const buttons = document.querySelectorAll("button[data-toast]")

  const hidePositionToasts = () => {
    toasts.forEach((toast) => {
      toast.style.display = "none"
    })
  }

  // Hide toasts immediately
  hidePositionToasts()

  // Handle various page load/restore events
  window.addEventListener('pageshow', hidePositionToasts)
  document.addEventListener('DOMContentLoaded', hidePositionToasts)
  document.addEventListener('turbolinks:load', hidePositionToasts)
  document.addEventListener('turbo:load', hidePositionToasts)

  buttons.forEach((button) => {
    button.onclick = () => {
      hidePositionToasts()
      let toast = document.querySelector(button.getAttribute("data-toast"))
      if (toast) {
        toast.style.display = "flex"
      }
    }
  })
</script>

Click to Show Auto Close

I will disappear in 3 seconds.

I will disappear in 10 seconds.

Auto close is used when you want the confirmation toast to close automatically after a certain time. auto_close property will be a delay number in ms.

The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.

<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  auto_close: 3000,
  classname: "toast-to-hide",
  id: "toast-auto-close",
  text: "I will disappear in 3 seconds.",
  status: "tip",
  vertical: "top",
  horizontal: "center"
}) %>

<%= pb_rails("fixed_confirmation_toast", props: {
  auto_close: 10000,
  closeable: true,
  id: "toast-auto-close-closeable",
  text: "I will disappear in 10 seconds.",
  status: "tip",
  vertical: "top",
  horizontal: "center"
}) %>

<script>
// Hide toasts immediately
const hideAutoToasts = () => {
  const toastAuto = document.getElementById('toast-auto-close');
  const toastAutoCloseable = document.getElementById('toast-auto-close-closeable');
  if (toastAuto) toastAuto.style.display = 'none';
  if (toastAutoCloseable) toastAutoCloseable.style.display = 'none';
}
hideAutoToasts();

// Handle various page load/restore events
window.addEventListener('pageshow', hideAutoToasts)
document.addEventListener('turbolinks:load', hideAutoToasts)
document.addEventListener('turbo:load', hideAutoToasts)

document.addEventListener('DOMContentLoaded', () => {
  // Initialize toast elements and buttons
  const toasts = {
    '#toast-auto-close': document.querySelector("#toast-auto-close"),
    '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
  }

  const buttons = {
    '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
    '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
  }

  // Store original toasts and remove them from DOM
  const originalToasts = {}
  Object.entries(toasts).forEach(([id, toast]) => {
    if (toast) {
      originalToasts[id] = toast.cloneNode(true)
      toast.remove()
    }
  })

  // Set up button click handlers
  Object.keys(buttons).forEach((toastId) => {
    const button = buttons[toastId]
    if (button) {
      button.onclick = () => {
        const newToast = originalToasts[toastId].cloneNode(true)
        newToast.style.display = "flex"
        document.body.appendChild(newToast)
      }
    }
  })
})
</script>

Children

Design & Handoff Process was moved to UX Designer Learning Track.

Pass anything (including any of our kits) to the children prop to customize the content of the fixed confirmation toast.

NOTE: passing children overrides any content passed to text

<%= pb_rails("fixed_confirmation_toast", props: {
  padding_y: "none",
  status: "success"
}) do %>
  <%= pb_rails("title", props: {
    dark: true,
    margin_left: "md",
    text: "Design & Handoff Process was moved to UX Designer Learning Track.",
    size: 4
  }) %>
  <%= pb_rails("button", props: {
    dark: true,
    padding_right: "none",
    text: "Undo",
    variant: "link"
  }) %>
<% end %>

Custom Icon

Fix before proceeding

Thank you for completing the form!

Saved as PDF

New Messages

<div>
  <%= pb_rails("fixed_confirmation_toast", props: {
    icon: "wrench",
    text: "Fix before proceeding",
    status: "error",
    closeable: true,
    margin_bottom: "md"
  })%>
</div>
<div>
  <%= pb_rails("fixed_confirmation_toast", props: {
    icon: "star",
    text: "Thank you for completing the form!",
    status: "success",
    margin_bottom: "md"
  })%>
</div>
<div>
  <%= pb_rails("fixed_confirmation_toast", props: {
    icon: "file-pdf",
    text: "Saved as PDF",
    status: "neutral",
    margin_bottom: "md"
  })%>
</div>
<div>
  <%= pb_rails("fixed_confirmation_toast", props: {
    icon: "arrow-down",
    text: "New Messages",
    status: "tip"
  })%>
</div>

No Icon

Error Message

Items Successfully Moved

Scan to Assign Selected Items

Setting icon prop to "none" will render the fixed confirmation toast without the left side icon.

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Error Message",
  status: "error",
  icon: "none",
  closeable: true
})%>

<br><br>

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Items Successfully Moved",
  status: "success",
  icon: "none"
})%>

<br><br>

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Scan to Assign Selected Items",
  status: "neutral",
  icon: "none"
})%>

Available Props

Props	Type	Values
align_content	enum \| responsive	start end center spaceBetween spaceAround spaceEvenly
align_items	enum \| responsive	start end center
border_radius	enum	none xs sm md lg xl rounded
cursor	enum	auto default none contextMenu help pointer progress wait cell
dark	boolean	true false
flex	enum \| responsive	auto initial 0 1 2 3 4 5 6 7 8 9 10 11 12 none
flex_direction	enum \| responsive	row column rowReverse columnReverse
flex_wrap	enum \| responsive	wrap nowrap wrapReverse
justify_content	enum \| responsive	start end center spaceBetween spaceAround spaceEvenly
line_height	enum	loosest looser loose normal tight tighter tightest
margin_right	array	none xxs xs sm md lg xl
margin_left	array	none xxs xs sm md lg xl
margin_top	array	none xxs xs sm md lg xl
margin_bottom	array	none xxs xs sm md lg xl
margin_x	array	none xxs xs sm md lg xl
margin_y	array	none xxs xs sm md lg xl
margin	array	none xxs xs sm md lg xl
width	string
min_width	string
max_width	string
gap	string \| responsive
column_gap	string \| responsive
row_gap	string \| responsive
number_spacing	enum	tabular
order	enum \| responsive	none first 1 2 3 4 5 6 7 8 9 10 11 12
overflow_x	enum	scroll visible hidden auto
overflow_y	enum	scroll visible hidden auto
overflow	enum	scroll visible hidden auto
padding_right	array	none xxs xs sm md lg xl
padding_left	array	none xxs xs sm md lg xl
padding_top	array	none xxs xs sm md lg xl
padding_bottom	array	none xxs xs sm md lg xl
padding_x	array	none xxs xs sm md lg xl
padding_y	array	none xxs xs sm md lg xl
padding	array	none xxs xs sm md lg xl
position	enum	relative absolute fixed sticky static
shadow	enum	none deep deeper deepest
text_align	enum \| responsive	start end left right center justify justifyAll matchParent
truncate	enum	none 1 2 3 4 5
vertical_align	enum \| responsive	baseline super top middle bottom sub text-top text-bottom
z_index	enum \| responsive	1 2 3 4 5 6 7 8 9 10 max
top	enum \| object	xxs xs sm md lg xl xxl
inset	boolean	true false
right	enum \| object	xxs xs sm md lg xl xxl
bottom	enum \| object	xxs xs sm md lg xl xxl
left	enum \| object	xxs xs sm md lg xl xxl
height	string
max_height	string
min_height	string
hover	object
group_hover	boolean	true false

Props	Type	Values	Default
auto_close	number
closeable	boolean	true false	false
horizontal	enum	right left center
icon	string
multi_line	boolean	true false	false
nav_margin_top	boolean	true false	false
on_close	voidcallback
open	boolean	true false
status	enum	success error neutral tip	neutral
text	string
vertical	enum	top bottom

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat

Fixed Confirmation Toast

Error Message

Items Successfully Moved

Scan to Assign Selected Items

Top nav Margin.

Multi-line is used when the given text will not fit on one line.

Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.

Error Message

Items Successfully Moved

Scan to Assign Selected Items

Top Center

Top Left

Top Right

Bottom Center

Bottom Left

Bottom Right

I will disappear in 3 seconds.

I will disappear in 10 seconds.

Design & Handoff Process was moved to UX Designer Learning Track.

Fix before proceeding

Thank you for completing the form!

Saved as PDF

New Messages

Error Message

Items Successfully Moved

Scan to Assign Selected Items

Available Props

align_content

align_items

border_radius

cursor

dark

flex

flex_direction

flex_wrap

justify_content

line_height

margin_right

margin_left

margin_top

margin_bottom

margin_x

margin_y

margin

width

min_width

max_width

gap

column_gap

row_gap

number_spacing

order

overflow_x

overflow_y

overflow

padding_right

padding_left

padding_top

padding_bottom

padding_x

padding_y

padding

position

shadow

text_align

truncate

vertical_align

z_index

top

inset

right

bottom

left

height

max_height

min_height

hover

group_hover

auto_close

closeable