Toast

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feedback to users after an action has taken place.

Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.

Basic usage#

Chakra UI injects the this.$toast method into your application's Vue instance so you can conveniently invoke toast notifications anywhere in your Vue templates.

Editable Example

<template>
  <c-button @click="showToast">Show Toast</c-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast({
        title: 'Account created.',
        description: "We've created your account for you.",
        status: 'info',
        duration: 10000
      })
    }
  }
}
</script>

Rendering custom toast components#

Display a custom component instead of the default Toast UI.

Rendering custom elements may require you to have some knowledge of how Vue's render function works.

In order to keep your custom toast components simple, it's best to extract your toast components into their own components and then consume them in the this.$toast render method.

Editable Example

<template>
  <c-button @click="showToast">Show Toast</c-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast({
        position: 'bottom-left',
        render: () => {
          return this.$createElement('c-box', {
            props: {
              color: 'white',
              p: 3,
              m: 3,
              bg: 'blue.500'
            }
          }, 'Hello World!')
        }
      })
    }
  }
}
</script>

Success#

Editable Example

<template>
  <c-button @click="showToast">Show Toast</c-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast({
        title: 'Account created.',
        description: "We've created your account for you.",
        status: 'success',
        duration: 10000
      })
    }
  }
}
</script>

Warning#

Editable Example

<template>
  <c-button @click="showToast">Show Toast</c-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast({
        title: 'Warning.',
        description: "You're almost out of storage.",
        status: 'warning',
        duration: 10000
      })
    }
  }
}
</script>

Error#

Editable Example

<template>
  <c-button @click="showToast">Show Toast</c-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast({
        title: 'An error occurred.',
        description: "Unable to load sharingan. Please shadow clones.",
        status: 'error',
        duration: 10000
      })
    }
  }
}
</script>

Position#

Using the position property you can adjust where your toast will be popup from.

Editable Example

<template>
  <c-button @click="showToast">Show Toast</c-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast({
        title: 'Account created.',
        description: "We've created your account for you.",
        status: 'success',
        duration: 10000,
        position: 'top-right'
      })
    }
  }
}
</script>

Variants#

The this.$toast method can also allow you to render toast notifications with different variants. Each toast status has 4 variants, namely: solid, subtle, top-accent and left-accent.

Try changing the variant property to a value between solid, subtle, top-accent, and left-accent to see all the toast variants!

Editable Example

<template>
  <c-button @click="showToast">Show Toast</c-button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast({
        title: 'Account created.',
        description: "We've created your account for you.",
        status: 'info',
        duration: 10000,
        variant: 'subtle' // `solid` | `subtle` | `top-accent` | `left-accent`
      })
    }
  }
}
</script>

Props#

Name	Type	Default	Description
`title`	`string`		The title of the toast.
`isClosable`	`boolean`	`false`	If `true` adds a close button to the toast.
`onClose`	`function`		Callback function to close the toast.
`description`	`string`		The description of the toast.
`status`	`success`, `error`, `warning`, `info`		The status of the toast.
`variant`	`solid`, `subtle`, `left-accent`, `top-accent`		The variant of the toast.
`duration`	`number`	`5000ms`	Duration before dismiss in milliseconds, or `null` to never dismiss.
`position`	`top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`	`bottom`	Position the toast will popup out from.
`render`	`(props: {onClose:() => void, id: string}) => Vue.VNode`		The description of the toast.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!