Toasts

<State initial={{ notifications: [] }}>
  {({ state, setState }) => (
    <div>
      <div className="docs-inline-group">
        <Button
          className="m-2"
          onClick={() => {
            setState({
              notifications: [
                {
                  title: 'Nicole Burton sent you a new lead: Joan Mir',
                  note: 'You have 23h 15m 56s to claim this lead',
                  icon: 'contact-agent-association-online',
                  hideCloseIcon: true,
                  theme: 'inline',
                  iconColorType: 'success',
                  timeout: 5000,
                },
                {
                  title: 'Nicole Burton sent you a new lead: Brad Binder',
                  note: 'You have 23h 15m 56s to claim this lead',
                  icon: 'target',
                  actions: [
                    { actionName: 'Claim', value: '3333' },
                    { actionName: 'Pass', value: '3333' },
                  ],
                },
                {
                  title: 'Nicole Burton sent you a new lead: Joan Mir',
                  note: 'You have 23h 15m 56s to claim this lead',
                },
                {
                  title: 'Nicole Burton sent you a new lead: Joan Mir',
                  note: 'You have 23h 15m 56s to claim this lead',
                  theme: 'inline',
                },
              ],
            })
          }}
        >
          Show Toasts
        </Button>
      </div>
      <Toasts
        notifications={state.notifications}
        onClick={(actionName, value) => {
          console.log(actionName, value)
        }}
      />
    </div>
  )}
</State>