---
name: Toast
menu: Components
route: /components/Toast
---

import { Playground, PropsTable } from 'docz'
import { State, Toggle } from 'react-powerplug'
import { InputText, Icon, Button, toast } from '@personio/ui-components'
import './toast.scss'

# Toast

## Example

<Playground>
  <div>
    <div className="toast-container">
      <Button theme="success" onClick={() => {
        toast.notify({ theme: 'success', children: 'I am a success toast' });
      }}>
        Open success
      </Button>
      <Button theme="info" onClick={() => {
        toast.notify({ theme: 'info', children: 'I am a info toast' });
      }}>
        Open info
      </Button>
      <Button theme="danger" onClick={() => {
        toast.notify({ theme: 'danger', children: 'I am a danger toast' });
      }}>
        Open danger
      </Button>
      <Button theme="warning" onClick={() => {
        toast.notify({ theme: 'warning', children: 'I am a warning toast' });
      }}>
        Open warning
      </Button>
    </div>
  </div>
</Playground>

## Content
For set the toast content, use the children prop. It can receive either a string or a component.

<Playground>
  <State initial={{ value: 'I am the toast content!' }}>
      {({ state, setState }) => (
        <div>
          <div>
            <InputText
              placeholder="Write something here to display in the toast"
              onChange={(e) => {
                setState({ value: e.currentTarget.value })
              }}
              value={state.value}
            />
          </div>
          <br />
          <div>
            <Button onClick={() => {
              toast.notify({ theme: 'success', duration: 3000, children: state.value });
            }}>
              Open toast with dinnamicly children
            </Button>
          </div>
        </div>
      )}
  </State>
</Playground>

## Actions
Use the action prop to define a footer content. This prop accepts only components.

<Playground>
  <Button onClick={() => {
    toast.notify({
      theme: 'info',
      autoClose: false,
      children: 'I am a footer with actions',
      actions: (
        <React.Fragment>
          <Button>Link 1</Button>
          <Button>Link 2</Button>
        </React.Fragment>
      )
    });
  }}>
    Open toast with content
  </Button>
</Playground>

## Changing the icon

<Playground>
  <State initial={{ value: 'tachometer', color: '#74c970' }}>
      {({ state, setState }) => (
        <div>
          <div>
            <label htmlFor="">Icon</label>
            <InputText
              placeholder="Name of the icon"
              onChange={(e) => {
                setState({ value: e.currentTarget.value })
              }}
              value={state.value}
            />
            <br />
            <br />
            <div>
              Icon preview: <Icon name={state.value} size={20} />
            </div>
            <br />
            <label htmlFor="">Color</label>
            <div>
              <InputText
                type="color"
                placeholder="Color"
                onChange={(e) => {
                  setState({ color: e.target.value })
                }}
                value={state.color}
              />
              <div>{state.color}</div>
            </div>
          </div>

          <br />
          <div>
            <Button onClick={() => {
              toast.notify({ theme: 'success', iconName: state.value, iconColor: state.color, autoClose: false, children: 'I am a toast with dinnamicly icon'});
            }}>
              Open toast with dinnamicly icon
            </Button>
          </div>
        </div>
      )}
  </State>
</Playground>

## Duration
Use the prop duration to set the time in miliseconds to auto close the toast. The default value is 5000ms.

<Playground>
  <State initial={{ duration: 3000 }}>
      {({ state, setState }) => (
        <div>
          <div>
            <InputText
              type="number"
              step={1000}
              min={1000}
              placeholder="Write the duration in MS"
              onChange={(e) => {
                setState({ duration: e.currentTarget.value })
              }}
              value={state.duration}
            />
          </div>
          <br />
          <div>
            <Button onClick={() => {
              toast.notify({ theme: 'success', duration: state.duration, children: 'Toast with dinnamicly duration' });
            }}>
              Open toast with dinnamicly children
            </Button>
          </div>
        </div>
      )}
  </State>
</Playground>

## Preventing to auto close
Use the autoClose prop to prevent the toast to close automatically.

<Playground>
  <Button onClick={() => {
    toast.notify({
      theme: 'info',
      autoClose: false,
      children: 'I am a toast which will not close unless you press on the close button'
    });
  }}>
    Open toast
  </Button>
</Playground>

## Without close button
Use the autoClose prop to prevent the toast to close automatically.

<Playground>
  <Button onClick={() => {
    toast.notify({
      theme: 'info',
      showCloseButton: false,
      duration: 5000,
      children: 'I am without close button'
    });
  }}>
    Open toast without close button
  </Button>
</Playground>
