# Toast
This component is used to show a message in a floating box relative to the
browser window.
## Usage
Call the `toast` function with options to create a toast. You need to make sure
you include the `Toasts` component in your root component
([`App.vue`](#app-vue)).
```vue
```
### App.vue
```vue
```
### `position`
Toasts can be positioned in six places with respect to the browser window.
- `top-left`
- `top-center`
- `top-right`
- `bottom-left`
- `bottom-center`
- `bottom-right`
```vue
```
## Options
| Name | Default | Value |
| :------------ | :------------- | :-------------------------------------------- |
| `title` | `null` | `String` |
| `text` | `null` | `String` |
| `timeout` | `5` | `Number` in seconds |
| `position` | `'top-center'` | See [position](#position) |
| `icon` | `null` | [FeatherIcon](/components/feathericon) name |
| `iconClasses` | `null` | CSS Classes to apply to FeatherIcon component |