@personio/ui-docs/components/toast/toast.mdx

---
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>